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);

0 commit comments

Comments
 (0)