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.
markmcdowell · Sep 8, 2019 · df1ad7c · df1ad7c
1 parent 7d1ea3e
commit df1ad7c
Show file tree

Hide file tree

Showing 35 changed files with 305 additions and 116 deletions.
diff --git a/README.md b/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
 

diff --git a/packages/react-financial-charts/src/annotation/BackgroundText.tsx b/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") {

diff --git a/packages/react-financial-charts/src/annotation/Label.tsx b/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();

diff --git a/packages/react-financial-charts/src/axes/Axis.tsx b/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;
 

diff --git a/packages/react-financial-charts/src/axes/AxisLine.tsx b/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();
 

diff --git a/packages/react-financial-charts/src/axes/AxisTicks.tsx b/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;

diff --git a/packages/react-financial-charts/src/coordinates/CrossHairCursor.tsx b/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();

diff --git a/packages/react-financial-charts/src/coordinates/Cursor.tsx b/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);

diff --git a/packages/react-financial-charts/src/coordinates/EdgeCoordinate.tsx b/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);

diff --git a/packages/react-financial-charts/src/coordinates/EdgeCoordinateV2.tsx b/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);

diff --git a/packages/react-financial-charts/src/coordinates/EdgeCoordinateV3.tsx b/packages/react-financial-charts/src/coordinates/EdgeCoordinateV3.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { getStrokeDasharray, hexToRGBA, isDefined } from "../utils";
+import { colorToRGBA, getStrokeDasharray, isDefined } from "../utils";
 
 export function renderSVG(props) {
     const { className } = props;
@@ -213,7 +213,7 @@ export function drawOnCanvas(ctx, props) {
             .split(",")
             .map((d) => +d);
         ctx.setLineDash(dashArray);
-        ctx.strokeStyle = hexToRGBA(edge.line.stroke, edge.line.opacity);
+        ctx.strokeStyle = colorToRGBA(edge.line.stroke, edge.line.opacity);
         ctx.lineWidth = 1;
         ctx.beginPath();
         ctx.moveTo(edge.line.x1, edge.line.y1);
@@ -229,12 +229,12 @@ export function drawOnCanvas(ctx, props) {
             rectRadius,
         } = edge.coordinateBase;
 
-        ctx.fillStyle = hexToRGBA(
+        ctx.fillStyle = colorToRGBA(
             edge.coordinateBase.fill,
             edge.coordinateBase.opacity,
         );
         if (isDefined(edge.coordinateBase.stroke)) {
-            ctx.strokeStyle = hexToRGBA(
+            ctx.strokeStyle = colorToRGBA(
                 edge.coordinateBase.stroke,
                 edge.coordinateBase.strokeOpacity,
             );

diff --git a/packages/react-financial-charts/src/interactive/Brush.tsx b/packages/react-financial-charts/src/interactive/Brush.tsx
@@ -3,8 +3,8 @@ import * as React from "react";
 import GenericChartComponent from "../GenericChartComponent";
 import { getMouseCanvas } from "../GenericComponent";
 import {
+    colorToRGBA,
     getStrokeDasharray,
-    hexToRGBA,
     isDefined,
     noop,
 } from "../utils";
@@ -88,15 +88,18 @@ export class Brush extends React.Component<BrushProps, BrushState> {
         const { rect } = this.state;
         if (isDefined(rect)) {
             const { x, y, height, width } = rect;
-            const { stroke, fill, strokeDashArray } = this.props;
+            const {
+                stroke = Brush.defaultProps.stroke,
+                fill = Brush.defaultProps.fill,
+                strokeDashArray } = this.props;
             const { strokeOpacity, fillOpacity } = this.props;
 
             const dashArray = getStrokeDasharray(strokeDashArray)
                 .split(",")
                 .map((d) => +d);
 
-            ctx.strokeStyle = hexToRGBA(stroke, strokeOpacity);
-            ctx.fillStyle = hexToRGBA(fill, fillOpacity);
+            ctx.strokeStyle = colorToRGBA(stroke, strokeOpacity);
+            ctx.fillStyle = colorToRGBA(fill, fillOpacity);
             ctx.setLineDash(dashArray);
             ctx.beginPath();
             ctx.fillRect(x, y, width, height);

diff --git a/packages/react-financial-charts/src/interactive/components/ChannelWithArea.tsx b/packages/react-financial-charts/src/interactive/components/ChannelWithArea.tsx
@@ -5,7 +5,7 @@ import GenericChartComponent from "../../GenericChartComponent";
 import { getMouseCanvas } from "../../GenericComponent";
 import { generateLine, isHovering } from "./StraightLine";
 
-import { hexToRGBA, isDefined, isNotDefined, noop } from "../../utils";
+import { colorToRGBA, isDefined, isNotDefined, noop } from "../../utils";
 
 interface ChannelWithAreaProps {
     startXY?: number[];
@@ -116,7 +116,7 @@ export class ChannelWithArea extends React.Component<ChannelWithAreaProps> {
             const { x1, y1, x2, y2 } = line1;
 
             ctx.lineWidth = strokeWidth;
-            ctx.strokeStyle = hexToRGBA(stroke, strokeOpacity);
+            ctx.strokeStyle = colorToRGBA(stroke, strokeOpacity);
 
             ctx.beginPath();
             ctx.moveTo(x1, y1);
@@ -134,7 +134,7 @@ export class ChannelWithArea extends React.Component<ChannelWithAreaProps> {
                 ctx.lineTo(x2, line2Y2);
                 ctx.stroke();
 
-                ctx.fillStyle = hexToRGBA(fill, fillOpacity);
+                ctx.fillStyle = colorToRGBA(fill, fillOpacity);
                 ctx.beginPath();
                 ctx.moveTo(x1, y1);
 

diff --git a/packages/react-financial-charts/src/interactive/components/ClickableCircle.tsx b/packages/react-financial-charts/src/interactive/components/ClickableCircle.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 
 import GenericChartComponent from "../../GenericChartComponent";
 import { getMouseCanvas } from "../../GenericComponent";
-import { hexToRGBA, isDefined, noop } from "../../utils";
+import { colorToRGBA, isDefined, noop } from "../../utils";
 
 interface ClickableCircleProps {
     readonly xyProvider?: any; // func
@@ -87,8 +87,8 @@ export class ClickableCircle extends React.Component<ClickableCircleProps> {
         const [x, y] = this.helper(this.props, moreProps);
 
         ctx.lineWidth = strokeWidth;
-        ctx.fillStyle = hexToRGBA(fill, fillOpacity);
-        ctx.strokeStyle = hexToRGBA(stroke, strokeOpacity);
+        ctx.fillStyle = colorToRGBA(fill, fillOpacity);
+        ctx.strokeStyle = colorToRGBA(stroke, strokeOpacity);
 
         ctx.beginPath();
         ctx.arc(x, y, r, 0, 2 * Math.PI, false);

diff --git a/packages/react-financial-charts/src/interactive/components/ClickableShape.tsx b/packages/react-financial-charts/src/interactive/components/ClickableShape.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import GenericChartComponent from "../../GenericChartComponent";
 import { getMouseCanvas } from "../../GenericComponent";
 
-import { hexToRGBA } from "../../utils";
+import { colorToRGBA } from "../../utils";
 import { isHovering2 } from "./StraightLine";
 
 interface ClickableShapeProps {
@@ -77,7 +77,7 @@ export class ClickableShape extends React.Component<ClickableShapeProps> {
         ctx.beginPath();
 
         ctx.lineWidth = hovering ? strokeWidth + 1 : strokeWidth;
-        ctx.strokeStyle = hexToRGBA(stroke, strokeOpacity);
+        ctx.strokeStyle = colorToRGBA(stroke, strokeOpacity);
         const halfWidth = textBox.closeIcon.width / 2;
         ctx.moveTo(x - halfWidth, y - halfWidth);
         ctx.lineTo(x + halfWidth, y + halfWidth);