Skip to content

Commit df1ad7c

Browse files
markmcdowellmarkmcdowell
committed
feat: adding support for rgab, color and hex
Previously all colors had to be entered as hex with a separate opacity. Now allowing rgba and color names as well.
1 parent 7d1ea3e commit df1ad7c

35 files changed

+305
-116
lines changed

‎README.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,13 +86,15 @@ npm start
8686
- [x] Add CI
8787
- [x] Fix passive scrolling issues
8888
- [x] Implement PRs from react-stockcharts
89-
- [ ] Add all typings
89+
- [x] Add all typings
90+
- [ ] Correct all class props
9091
- [ ] Fix issues with empty datasets
92+
- [ ] Migrate to new React Context API
9193
- [ ] Remove all UNSAFE methods
9294
- [ ] Add full test suite
9395
- [ ] Expand examples
9496
- [ ] Generate documentation from typings
95-
- [ ] Split project into multiple
97+
- [ ] Split project into multiple packages
9698

9799
## LICENSE
98100

‎packages/react-financial-charts/src/annotation/BackgroundText.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as PropTypes from "prop-types";
22
import * as React from "react";
33

4-
import { hexToRGBA, isDefined } from "../utils";
4+
import { colorToRGBA, isDefined } from "../utils";
55
import { PureComponent } from "../utils/PureComponent";
66

77
interface BackgroundTextProps {
@@ -77,10 +77,10 @@ class BackgroundText extends PureComponent<BackgroundTextProps> {
7777

7878
const text = getText(interval);
7979

80-
ctx.strokeStyle = hexToRGBA(stroke, strokeOpacity);
80+
ctx.strokeStyle = colorToRGBA(stroke, strokeOpacity);
8181

8282
ctx.font = `${fontSize}px ${fontFamily}`;
83-
ctx.fillStyle = hexToRGBA(fill, opacity);
83+
ctx.fillStyle = colorToRGBA(fill, opacity);
8484
ctx.textAlign = textAnchor === "middle" ? "center" : textAnchor;
8585

8686
if (stroke !== "none") {

‎packages/react-financial-charts/src/annotation/Label.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as PropTypes from "prop-types";
22
import * as React from "react";
33
import GenericComponent from "../GenericComponent";
44

5-
import { functor, hexToRGBA, isDefined } from "../utils";
5+
import { colorToRGBA, functor, isDefined } from "../utils";
66
import { helper, LabelAnnotation } from "./LabelAnnotation";
77

88
interface LabelProps {
@@ -108,7 +108,7 @@ function drawOnCanvas(ctx, props, moreProps) {
108108
ctx.rotate(radians);
109109

110110
ctx.font = `${fontSize}px ${fontFamily}`;
111-
ctx.fillStyle = hexToRGBA(fill, opacity);
111+
ctx.fillStyle = colorToRGBA(fill, opacity);
112112
ctx.textAlign = textAnchor === "middle" ? "center" : textAnchor;
113113

114114
ctx.beginPath();

‎packages/react-financial-charts/src/axes/Axis.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import GenericChartComponent from "../GenericChartComponent";
66
import { getAxisCanvas } from "../GenericComponent";
77
import { AxisZoomCapture } from "./AxisZoomCapture";
88

9-
import { first, getStrokeDasharray, hexToRGBA, identity, isDefined, isNotDefined, last, strokeDashTypes, zipper } from "../utils";
9+
import { colorToRGBA, first, getStrokeDasharray, identity, isDefined, isNotDefined, last, strokeDashTypes, zipper } from "../utils";
1010

1111
interface AxisProps {
1212
readonly flexTicks?: boolean;
@@ -300,7 +300,7 @@ function drawAxisLine(ctx, props, range) {
300300
const xAxis = (orient === "bottom" || orient === "top");
301301

302302
ctx.lineWidth = strokeWidth;
303-
ctx.strokeStyle = hexToRGBA(stroke, opacity);
303+
ctx.strokeStyle = colorToRGBA(stroke, opacity);
304304

305305
ctx.beginPath();
306306

@@ -414,7 +414,7 @@ function drawTicks(ctx, result) {
414414
const { tickStroke, tickStrokeOpacity, tickLabelFill } = result;
415415
const { textAnchor, fontSize, fontFamily, fontWeight, ticks, showTickLabel } = result;
416416

417-
ctx.strokeStyle = hexToRGBA(tickStroke, tickStrokeOpacity);
417+
ctx.strokeStyle = colorToRGBA(tickStroke, tickStrokeOpacity);
418418

419419
ctx.fillStyle = tickStroke;
420420

‎packages/react-financial-charts/src/axes/AxisLine.tsx

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from "react";
2-
import { first, hexToRGBA, last } from "../utils";
2+
import { colorToRGBA, first, last } from "../utils";
33

44
interface AxisLineProps {
55
className?: string;
@@ -14,16 +14,6 @@ interface AxisLineProps {
1414
range: number[];
1515
}
1616

17-
/*
18-
function d3_scaleExtent(domain) {
19-
var start = domain[0], stop = domain[domain.length - 1];
20-
return start < stop ? [start, stop] : [stop, start];
21-
}
22-
23-
function d3_scaleRange(scale) {
24-
return scale.rangeExtent ? scale.rangeExtent() : d3_scaleExtent(scale.range());
25-
}
26-
*/
2717
export class AxisLine extends React.Component<AxisLineProps> {
2818

2919
public static defaultProps = {
@@ -43,10 +33,9 @@ export class AxisLine extends React.Component<AxisLineProps> {
4333
const sign = orient === "top" || orient === "left" ? -1 : 1;
4434
const xAxis = (orient === "bottom" || orient === "top");
4535

46-
// var range = d3_scaleRange(xAxis ? xScale : yScale);
47-
4836
ctx.lineWidth = strokeWidth;
49-
ctx.strokeStyle = hexToRGBA(stroke, opacity);
37+
38+
ctx.strokeStyle = colorToRGBA(stroke, opacity);
5039

5140
ctx.beginPath();
5241

‎packages/react-financial-charts/src/axes/AxisTicks.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from "react";
22

3-
import { hexToRGBA, identity, isNotDefined } from "../utils";
3+
import { colorToRGBA, identity, isNotDefined } from "../utils";
44

55
function tickTransform_svg_axisX(scale, tick) {
66
return [Math.round(scale(tick)), 0];
@@ -92,7 +92,7 @@ export class AxisTicks extends React.Component<AxisTicksProps> {
9292

9393
const { tickStroke, tickStrokeOpacity, textAnchor, fontSize, fontFamily } = result;
9494

95-
ctx.strokeStyle = hexToRGBA(tickStroke, tickStrokeOpacity);
95+
ctx.strokeStyle = colorToRGBA(tickStroke, tickStrokeOpacity);
9696

9797
ctx.font = `${fontSize}px ${fontFamily}`;
9898
ctx.fillStyle = tickStroke;

‎packages/react-financial-charts/src/coordinates/CrossHairCursor.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as PropTypes from "prop-types";
22
import * as React from "react";
33
import GenericComponent, { getMouseCanvas } from "../GenericComponent";
44

5-
import { getStrokeDasharray, hexToRGBA, isDefined, isNotDefined, strokeDashTypes } from "../utils";
5+
import { colorToRGBA, getStrokeDasharray, isDefined, isNotDefined, strokeDashTypes } from "../utils";
66

77
interface CrossHairCursorProps {
88
readonly className?: string;
@@ -86,7 +86,7 @@ export class CrossHairCursor extends React.Component<CrossHairCursorProps> {
8686
.split(",")
8787
.map((d) => +d);
8888

89-
ctx.strokeStyle = hexToRGBA(line.stroke, line.opacity);
89+
ctx.strokeStyle = colorToRGBA(line.stroke, line.opacity);
9090
ctx.lineWidth = 1;
9191
ctx.setLineDash(dashArray);
9292
ctx.beginPath();

‎packages/react-financial-charts/src/coordinates/Cursor.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import * as React from "react";
33
import GenericComponent, { getMouseCanvas } from "../GenericComponent";
44

55
import {
6+
colorToRGBA,
67
first,
78
getStrokeDasharray,
8-
hexToRGBA,
99
isNotDefined,
1010
last,
1111
strokeDashTypes,
@@ -169,7 +169,7 @@ class Cursor extends React.Component<CursorProps> {
169169
const xShapeStroke = this.getXCursorShapeStroke(
170170
moreProps,
171171
);
172-
ctx.strokeStyle = hexToRGBA(
172+
ctx.strokeStyle = colorToRGBA(
173173
xShapeStroke,
174174
xCursorShapeOpacity,
175175
);
@@ -183,7 +183,7 @@ class Cursor extends React.Component<CursorProps> {
183183
ctx.beginPath();
184184
ctx.fillStyle =
185185
xShapeFill != null
186-
? hexToRGBA(xShapeFill, xCursorShapeOpacity)
186+
? colorToRGBA(xShapeFill, xCursorShapeOpacity)
187187
: "rgba(0, 0, 0, 0)"; // ="transparent"
188188

189189
ctx.beginPath();
@@ -202,7 +202,7 @@ class Cursor extends React.Component<CursorProps> {
202202
);
203203
ctx.fill();
204204
} else {
205-
ctx.strokeStyle = hexToRGBA(line.stroke, line.opacity);
205+
ctx.strokeStyle = colorToRGBA(line.stroke, line.opacity);
206206
ctx.setLineDash(dashArray);
207207
ctx.beginPath();
208208
ctx.moveTo(line.x1, line.y1);

‎packages/react-financial-charts/src/coordinates/EdgeCoordinate.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
import * as React from "react";
33

4-
import { hexToRGBA, isDefined } from "../utils";
4+
import { colorToRGBA, isDefined } from "../utils";
55

66
const helper = (props) => {
77
const { coordinate: displayCoordinate, show, type, orient, edgeAt, hideLine } = props;
@@ -92,7 +92,7 @@ export class EdgeCoordinate extends React.Component<EdgeCoordinateProps> {
9292
if (isDefined(edge.coordinateBase)) {
9393
const { rectWidth, rectHeight, arrowWidth } = edge.coordinateBase;
9494

95-
ctx.fillStyle = hexToRGBA(edge.coordinateBase.fill, edge.coordinateBase.opacity);
95+
ctx.fillStyle = colorToRGBA(edge.coordinateBase.fill, edge.coordinateBase.opacity);
9696

9797
const x = edge.coordinateBase.edgeXRect;
9898
const y = edge.coordinateBase.edgeYRect;
@@ -127,7 +127,7 @@ export class EdgeCoordinate extends React.Component<EdgeCoordinateProps> {
127127
}
128128

129129
if (edge.line !== undefined) {
130-
ctx.strokeStyle = hexToRGBA(edge.line.stroke, edge.line.opacity);
130+
ctx.strokeStyle = colorToRGBA(edge.line.stroke, edge.line.opacity);
131131

132132
ctx.beginPath();
133133
ctx.moveTo(edge.line.x1, edge.line.y1);

‎packages/react-financial-charts/src/coordinates/EdgeCoordinateV2.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from "react";
22

3-
import { hexToRGBA, isDefined } from "../utils";
3+
import { colorToRGBA, isDefined } from "../utils";
44

55
export function renderSVG(props) {
66
const { className } = props;
@@ -109,7 +109,7 @@ export function drawOnCanvas(ctx, props) {
109109
if (isDefined(edge.coordinateBase)) {
110110
const { rectWidth, rectHeight, arrowWidth } = edge.coordinateBase;
111111

112-
ctx.fillStyle = hexToRGBA(edge.coordinateBase.fill, edge.coordinateBase.opacity);
112+
ctx.fillStyle = colorToRGBA(edge.coordinateBase.fill, edge.coordinateBase.opacity);
113113

114114
const x = edge.coordinateBase.edgeXRect;
115115
const y = edge.coordinateBase.edgeYRect;
@@ -143,7 +143,7 @@ export function drawOnCanvas(ctx, props) {
143143
ctx.fillText(edge.coordinate.displayCoordinate, edge.coordinate.edgeXText, edge.coordinate.edgeYText);
144144
}
145145
if (edge.line !== undefined && isDefined(edge.line)) {
146-
ctx.strokeStyle = hexToRGBA(edge.line.stroke, edge.line.opacity);
146+
ctx.strokeStyle = colorToRGBA(edge.line.stroke, edge.line.opacity);
147147

148148
ctx.beginPath();
149149
ctx.moveTo(edge.line.x1, edge.line.y1);

‎packages/react-financial-charts/src/coordinates/EdgeCoordinateV3.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from "react";
22

3-
import { getStrokeDasharray, hexToRGBA, isDefined } from "../utils";
3+
import { colorToRGBA, getStrokeDasharray, isDefined } from "../utils";
44

55
export function renderSVG(props) {
66
const { className } = props;
@@ -213,7 +213,7 @@ export function drawOnCanvas(ctx, props) {
213213
.split(",")
214214
.map((d) => +d);
215215
ctx.setLineDash(dashArray);
216-
ctx.strokeStyle = hexToRGBA(edge.line.stroke, edge.line.opacity);
216+
ctx.strokeStyle = colorToRGBA(edge.line.stroke, edge.line.opacity);
217217
ctx.lineWidth = 1;
218218
ctx.beginPath();
219219
ctx.moveTo(edge.line.x1, edge.line.y1);
@@ -229,12 +229,12 @@ export function drawOnCanvas(ctx, props) {
229229
rectRadius,
230230
} = edge.coordinateBase;
231231

232-
ctx.fillStyle = hexToRGBA(
232+
ctx.fillStyle = colorToRGBA(
233233
edge.coordinateBase.fill,
234234
edge.coordinateBase.opacity,
235235
);
236236
if (isDefined(edge.coordinateBase.stroke)) {
237-
ctx.strokeStyle = hexToRGBA(
237+
ctx.strokeStyle = colorToRGBA(
238238
edge.coordinateBase.stroke,
239239
edge.coordinateBase.strokeOpacity,
240240
);

‎packages/react-financial-charts/src/interactive/Brush.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import * as React from "react";
33
import GenericChartComponent from "../GenericChartComponent";
44
import { getMouseCanvas } from "../GenericComponent";
55
import {
6+
colorToRGBA,
67
getStrokeDasharray,
7-
hexToRGBA,
88
isDefined,
99
noop,
1010
} from "../utils";
@@ -88,15 +88,18 @@ export class Brush extends React.Component<BrushProps, BrushState> {
8888
const { rect } = this.state;
8989
if (isDefined(rect)) {
9090
const { x, y, height, width } = rect;
91-
const { stroke, fill, strokeDashArray } = this.props;
91+
const {
92+
stroke = Brush.defaultProps.stroke,
93+
fill = Brush.defaultProps.fill,
94+
strokeDashArray } = this.props;
9295
const { strokeOpacity, fillOpacity } = this.props;
9396

9497
const dashArray = getStrokeDasharray(strokeDashArray)
9598
.split(",")
9699
.map((d) => +d);
97100

98-
ctx.strokeStyle = hexToRGBA(stroke, strokeOpacity);
99-
ctx.fillStyle = hexToRGBA(fill, fillOpacity);
101+
ctx.strokeStyle = colorToRGBA(stroke, strokeOpacity);
102+
ctx.fillStyle = colorToRGBA(fill, fillOpacity);
100103
ctx.setLineDash(dashArray);
101104
ctx.beginPath();
102105
ctx.fillRect(x, y, width, height);

‎packages/react-financial-charts/src/interactive/components/ChannelWithArea.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import GenericChartComponent from "../../GenericChartComponent";
55
import { getMouseCanvas } from "../../GenericComponent";
66
import { generateLine, isHovering } from "./StraightLine";
77

8-
import { hexToRGBA, isDefined, isNotDefined, noop } from "../../utils";
8+
import { colorToRGBA, isDefined, isNotDefined, noop } from "../../utils";
99

1010
interface ChannelWithAreaProps {
1111
startXY?: number[];
@@ -116,7 +116,7 @@ export class ChannelWithArea extends React.Component<ChannelWithAreaProps> {
116116
const { x1, y1, x2, y2 } = line1;
117117

118118
ctx.lineWidth = strokeWidth;
119-
ctx.strokeStyle = hexToRGBA(stroke, strokeOpacity);
119+
ctx.strokeStyle = colorToRGBA(stroke, strokeOpacity);
120120

121121
ctx.beginPath();
122122
ctx.moveTo(x1, y1);
@@ -134,7 +134,7 @@ export class ChannelWithArea extends React.Component<ChannelWithAreaProps> {
134134
ctx.lineTo(x2, line2Y2);
135135
ctx.stroke();
136136

137-
ctx.fillStyle = hexToRGBA(fill, fillOpacity);
137+
ctx.fillStyle = colorToRGBA(fill, fillOpacity);
138138
ctx.beginPath();
139139
ctx.moveTo(x1, y1);
140140

‎packages/react-financial-charts/src/interactive/components/ClickableCircle.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from "react";
22

33
import GenericChartComponent from "../../GenericChartComponent";
44
import { getMouseCanvas } from "../../GenericComponent";
5-
import { hexToRGBA, isDefined, noop } from "../../utils";
5+
import { colorToRGBA, isDefined, noop } from "../../utils";
66

77
interface ClickableCircleProps {
88
readonly xyProvider?: any; // func
@@ -87,8 +87,8 @@ export class ClickableCircle extends React.Component<ClickableCircleProps> {
8787
const [x, y] = this.helper(this.props, moreProps);
8888

8989
ctx.lineWidth = strokeWidth;
90-
ctx.fillStyle = hexToRGBA(fill, fillOpacity);
91-
ctx.strokeStyle = hexToRGBA(stroke, strokeOpacity);
90+
ctx.fillStyle = colorToRGBA(fill, fillOpacity);
91+
ctx.strokeStyle = colorToRGBA(stroke, strokeOpacity);
9292

9393
ctx.beginPath();
9494
ctx.arc(x, y, r, 0, 2 * Math.PI, false);

‎packages/react-financial-charts/src/interactive/components/ClickableShape.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import * as React from "react";
33
import GenericChartComponent from "../../GenericChartComponent";
44
import { getMouseCanvas } from "../../GenericComponent";
55

6-
import { hexToRGBA } from "../../utils";
6+
import { colorToRGBA } from "../../utils";
77
import { isHovering2 } from "./StraightLine";
88

99
interface ClickableShapeProps {
@@ -77,7 +77,7 @@ export class ClickableShape extends React.Component<ClickableShapeProps> {
7777
ctx.beginPath();
7878

7979
ctx.lineWidth = hovering ? strokeWidth + 1 : strokeWidth;
80-
ctx.strokeStyle = hexToRGBA(stroke, strokeOpacity);
80+
ctx.strokeStyle = colorToRGBA(stroke, strokeOpacity);
8181
const halfWidth = textBox.closeIcon.width / 2;
8282
ctx.moveTo(x - halfWidth, y - halfWidth);
8383
ctx.lineTo(x + halfWidth, y + halfWidth);

0 commit comments

Comments
 (0)