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.

Author: markmcdowell

README.md

@@ -86,13 +86,15 @@ npm start
 - [x] Add CI
 - [x] Fix passive scrolling issues
 - [x] Implement PRs from react-stockcharts
-- [ ] Add all typings
+- [x] Add all typings
+- [ ] Correct all class props
 - [ ] Fix issues with empty datasets
+- [ ] Migrate to new React Context API
 - [ ] Remove all UNSAFE methods
 - [ ] Add full test suite
 - [ ] Expand examples
 - [ ] Generate documentation from typings
-- [ ] Split project into multiple
+- [ ] Split project into multiple packages
 
 ## LICENSE
 

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

@@ -1,7 +1,7 @@
 import * as PropTypes from "prop-types";
 import * as React from "react";
 
-import { hexToRGBA, isDefined } from "../utils";
+import { colorToRGBA, isDefined } from "../utils";
 import { PureComponent } from "../utils/PureComponent";
 
 interface BackgroundTextProps {
@@ -77,10 +77,10 @@ class BackgroundText extends PureComponent<BackgroundTextProps> {
 
         const text = getText(interval);
 
-        ctx.strokeStyle = hexToRGBA(stroke, strokeOpacity);
+        ctx.strokeStyle = colorToRGBA(stroke, strokeOpacity);
 
         ctx.font = `${fontSize}px ${fontFamily}`;
-        ctx.fillStyle = hexToRGBA(fill, opacity);
+        ctx.fillStyle = colorToRGBA(fill, opacity);
         ctx.textAlign = textAnchor === "middle" ? "center" : textAnchor;
 
         if (stroke !== "none") {

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

@@ -2,7 +2,7 @@ import * as PropTypes from "prop-types";
 import * as React from "react";
 import GenericComponent from "../GenericComponent";
 
-import { functor, hexToRGBA, isDefined } from "../utils";
+import { colorToRGBA, functor, isDefined } from "../utils";
 import { helper, LabelAnnotation } from "./LabelAnnotation";
 
 interface LabelProps {
@@ -108,7 +108,7 @@ function drawOnCanvas(ctx, props, moreProps) {
     ctx.rotate(radians);
 
     ctx.font = `${fontSize}px ${fontFamily}`;
-    ctx.fillStyle = hexToRGBA(fill, opacity);
+    ctx.fillStyle = colorToRGBA(fill, opacity);
     ctx.textAlign = textAnchor === "middle" ? "center" : textAnchor;
 
     ctx.beginPath();

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

@@ -6,7 +6,7 @@ import GenericChartComponent from "../GenericChartComponent";
 import { getAxisCanvas } from "../GenericComponent";
 import { AxisZoomCapture } from "./AxisZoomCapture";
 
-import { first, getStrokeDasharray, hexToRGBA, identity, isDefined, isNotDefined, last, strokeDashTypes, zipper } from "../utils";
+import { colorToRGBA, first, getStrokeDasharray, identity, isDefined, isNotDefined, last, strokeDashTypes, zipper } from "../utils";
 
 interface AxisProps {
     readonly flexTicks?: boolean;
@@ -300,7 +300,7 @@ function drawAxisLine(ctx, props, range) {
     const xAxis = (orient === "bottom" || orient === "top");
 
     ctx.lineWidth = strokeWidth;
-    ctx.strokeStyle = hexToRGBA(stroke, opacity);
+    ctx.strokeStyle = colorToRGBA(stroke, opacity);
 
     ctx.beginPath();
 
@@ -414,7 +414,7 @@ function drawTicks(ctx, result) {
     const { tickStroke, tickStrokeOpacity, tickLabelFill } = result;
     const { textAnchor, fontSize, fontFamily, fontWeight, ticks, showTickLabel } = result;
 
-    ctx.strokeStyle = hexToRGBA(tickStroke, tickStrokeOpacity);
+    ctx.strokeStyle = colorToRGBA(tickStroke, tickStrokeOpacity);
 
     ctx.fillStyle = tickStroke;
 

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { first, hexToRGBA, last } from "../utils";
+import { colorToRGBA, first, last } from "../utils";
 
 interface AxisLineProps {
     className?: string;
@@ -14,16 +14,6 @@ interface AxisLineProps {
     range: number[];
 }
 
-/*
-function d3_scaleExtent(domain) {
-	var start = domain[0], stop = domain[domain.length - 1];
-	return start < stop ? [start, stop] : [stop, start];
-}
-
-function d3_scaleRange(scale) {
-	return scale.rangeExtent ? scale.rangeExtent() : d3_scaleExtent(scale.range());
-}
-*/
 export class AxisLine extends React.Component<AxisLineProps> {
 
     public static defaultProps = {
@@ -43,10 +33,9 @@ export class AxisLine extends React.Component<AxisLineProps> {
         const sign = orient === "top" || orient === "left" ? -1 : 1;
         const xAxis = (orient === "bottom" || orient === "top");
 
-        // var range = d3_scaleRange(xAxis ? xScale : yScale);
-
         ctx.lineWidth = strokeWidth;
-        ctx.strokeStyle = hexToRGBA(stroke, opacity);
+
+        ctx.strokeStyle = colorToRGBA(stroke, opacity);
 
         ctx.beginPath();
 

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { hexToRGBA, identity, isNotDefined } from "../utils";
+import { colorToRGBA, identity, isNotDefined } from "../utils";
 
 function tickTransform_svg_axisX(scale, tick) {
     return [Math.round(scale(tick)), 0];
@@ -92,7 +92,7 @@ export class AxisTicks extends React.Component<AxisTicksProps> {
 
         const { tickStroke, tickStrokeOpacity, textAnchor, fontSize, fontFamily } = result;
 
-        ctx.strokeStyle = hexToRGBA(tickStroke, tickStrokeOpacity);
+        ctx.strokeStyle = colorToRGBA(tickStroke, tickStrokeOpacity);
 
         ctx.font = `${fontSize}px ${fontFamily}`;
         ctx.fillStyle = tickStroke;

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

@@ -2,7 +2,7 @@ import * as PropTypes from "prop-types";
 import * as React from "react";
 import GenericComponent, { getMouseCanvas } from "../GenericComponent";
 
-import { getStrokeDasharray, hexToRGBA, isDefined, isNotDefined, strokeDashTypes } from "../utils";
+import { colorToRGBA, getStrokeDasharray, isDefined, isNotDefined, strokeDashTypes } from "../utils";
 
 interface CrossHairCursorProps {
     readonly className?: string;
@@ -86,7 +86,7 @@ export class CrossHairCursor extends React.Component<CrossHairCursorProps> {
                     .split(",")
                     .map((d) => +d);
 
-                ctx.strokeStyle = hexToRGBA(line.stroke, line.opacity);
+                ctx.strokeStyle = colorToRGBA(line.stroke, line.opacity);
                 ctx.lineWidth = 1;
                 ctx.setLineDash(dashArray);
                 ctx.beginPath();

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

@@ -3,9 +3,9 @@ import * as React from "react";
 import GenericComponent, { getMouseCanvas } from "../GenericComponent";
 
 import {
+    colorToRGBA,
     first,
     getStrokeDasharray,
-    hexToRGBA,
     isNotDefined,
     last,
     strokeDashTypes,
@@ -169,7 +169,7 @@ class Cursor extends React.Component<CursorProps> {
                         const xShapeStroke = this.getXCursorShapeStroke(
                             moreProps,
                         );
-                        ctx.strokeStyle = hexToRGBA(
+                        ctx.strokeStyle = colorToRGBA(
                             xShapeStroke,
                             xCursorShapeOpacity,
                         );
@@ -183,7 +183,7 @@ class Cursor extends React.Component<CursorProps> {
                     ctx.beginPath();
                     ctx.fillStyle =
                         xShapeFill != null
-                            ? hexToRGBA(xShapeFill, xCursorShapeOpacity)
+                            ? colorToRGBA(xShapeFill, xCursorShapeOpacity)
                             : "rgba(0, 0, 0, 0)"; // ="transparent"
 
                     ctx.beginPath();
@@ -202,7 +202,7 @@ class Cursor extends React.Component<CursorProps> {
                         );
                     ctx.fill();
                 } else {
-                    ctx.strokeStyle = hexToRGBA(line.stroke, line.opacity);
+                    ctx.strokeStyle = colorToRGBA(line.stroke, line.opacity);
                     ctx.setLineDash(dashArray);
                     ctx.beginPath();
                     ctx.moveTo(line.x1, line.y1);

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

@@ -1,7 +1,7 @@
 
 import * as React from "react";
 
-import { hexToRGBA, isDefined } from "../utils";
+import { colorToRGBA, isDefined } from "../utils";
 
 const helper = (props) => {
     const { coordinate: displayCoordinate, show, type, orient, edgeAt, hideLine } = props;
@@ -92,7 +92,7 @@ export class EdgeCoordinate extends React.Component<EdgeCoordinateProps> {
         if (isDefined(edge.coordinateBase)) {
             const { rectWidth, rectHeight, arrowWidth } = edge.coordinateBase;
 
-            ctx.fillStyle = hexToRGBA(edge.coordinateBase.fill, edge.coordinateBase.opacity);
+            ctx.fillStyle = colorToRGBA(edge.coordinateBase.fill, edge.coordinateBase.opacity);
 
             const x = edge.coordinateBase.edgeXRect;
             const y = edge.coordinateBase.edgeYRect;
@@ -127,7 +127,7 @@ export class EdgeCoordinate extends React.Component<EdgeCoordinateProps> {
         }
 
         if (edge.line !== undefined) {
-            ctx.strokeStyle = hexToRGBA(edge.line.stroke, edge.line.opacity);
+            ctx.strokeStyle = colorToRGBA(edge.line.stroke, edge.line.opacity);
 
             ctx.beginPath();
             ctx.moveTo(edge.line.x1, edge.line.y1);

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { hexToRGBA, isDefined } from "../utils";
+import { colorToRGBA, isDefined } from "../utils";
 
 export function renderSVG(props) {
     const { className } = props;
@@ -109,7 +109,7 @@ export function drawOnCanvas(ctx, props) {
     if (isDefined(edge.coordinateBase)) {
         const { rectWidth, rectHeight, arrowWidth } = edge.coordinateBase;
 
-        ctx.fillStyle = hexToRGBA(edge.coordinateBase.fill, edge.coordinateBase.opacity);
+        ctx.fillStyle = colorToRGBA(edge.coordinateBase.fill, edge.coordinateBase.opacity);
 
         const x = edge.coordinateBase.edgeXRect;
         const y = edge.coordinateBase.edgeYRect;
@@ -143,7 +143,7 @@ export function drawOnCanvas(ctx, props) {
         ctx.fillText(edge.coordinate.displayCoordinate, edge.coordinate.edgeXText, edge.coordinate.edgeYText);
     }
     if (edge.line !== undefined && isDefined(edge.line)) {
-        ctx.strokeStyle = hexToRGBA(edge.line.stroke, edge.line.opacity);
+        ctx.strokeStyle = colorToRGBA(edge.line.stroke, edge.line.opacity);
 
         ctx.beginPath();
         ctx.moveTo(edge.line.x1, edge.line.y1);