From d3c1bbb9eea624aead45684ca2cbbfca0cccdb5f Mon Sep 17 00:00:00 2001 From: Mark McDowell Date: Mon, 2 Dec 2019 15:03:04 +0000 Subject: [PATCH] feat(charts): updated zoom buttons styling Using circles instead of rects. Adding zoom buttons to stories. --- .../charts/src/interactive/ZoomButtons.tsx | 188 +++++++----------- .../src/features/FullCanvas.stories.tsx | 9 + packages/stories/src/features/stockChart.tsx | 23 +-- 3 files changed, 93 insertions(+), 127 deletions(-) create mode 100644 packages/stories/src/features/FullCanvas.stories.tsx diff --git a/packages/charts/src/interactive/ZoomButtons.tsx b/packages/charts/src/interactive/ZoomButtons.tsx index 64ef4cede..105a17623 100644 --- a/packages/charts/src/interactive/ZoomButtons.tsx +++ b/packages/charts/src/interactive/ZoomButtons.tsx @@ -1,44 +1,31 @@ import { interpolateNumber } from "d3-interpolate"; -import { path as d3Path } from "d3-path"; import * as PropTypes from "prop-types"; import * as React from "react"; import { last, noop } from "../utils"; interface ZoomButtonsProps { - readonly zoomMultiplier: number; - readonly size: number[]; + readonly fill: string; + readonly fillOpacity: number; readonly heightFromBase: number; - readonly rx: number; - readonly ry: number; + readonly onReset: () => void; + readonly r: number; readonly stroke: string; readonly strokeWidth: number; - readonly strokeOpacity: number; - readonly fill: string; - readonly fillOpacity: number; - readonly fontSize: number; - readonly textDy: string; readonly textFill: string; - readonly textStrokeWidth: number; - readonly onReset: any; // func + readonly zoomMultiplier: number; } export class ZoomButtons extends React.Component { public static defaultProps = { - size: [30, 24], - heightFromBase: 50, - rx: 3, - ry: 3, - stroke: "#000000", - strokeOpacity: 0.3, + fill: "#ffffff", + fillOpacity: 0.75, + heightFromBase: 32, + r: 16, + stroke: "#e0e3eb", strokeWidth: 1, - fill: "#D6D6D6", - fillOpacity: 0.4, - fontSize: 16, - textDy: ".3em", textFill: "#000000", - textStrokeWidth: 2, zoomMultiplier: 1.5, onReset: noop, }; @@ -55,130 +42,101 @@ export class ZoomButtons extends React.Component { public render() { const { chartConfig } = this.context; - const { width, height } = chartConfig; - const { size, heightFromBase, rx, ry } = this.props; - const { stroke, strokeOpacity, fill, strokeWidth, fillOpacity } = this.props; - const { textFill, textStrokeWidth } = this.props; - const { onReset } = this.props; - const centerX = Math.round(width / 2); - const y = height - heightFromBase; - - const [w, h] = size; - const hLength = 5; - const wLength = 6; - - const textY = Math.round(y + h / 2); - - const resetX = centerX; - const zoomOut = d3Path(); - const zoomOutX = centerX - w - 2 * strokeWidth; - zoomOut.moveTo(zoomOutX - wLength, textY); - zoomOut.lineTo(zoomOutX + wLength, textY); - zoomOut.closePath(); + const { width, height } = chartConfig; - const zoomIn = d3Path(); - const zoomInX = centerX + w + 2 * strokeWidth; + const { heightFromBase, r, fill, fillOpacity, onReset, stroke, strokeWidth, textFill } = this.props; - zoomIn.moveTo(zoomInX - wLength, textY); - zoomIn.lineTo(zoomInX + wLength, textY); + const centerX = Math.round(width / 2); + const y = height - heightFromBase; - zoomIn.moveTo(zoomInX, textY - hLength); - zoomIn.lineTo(zoomInX, textY + hLength); + const zoomOutX = centerX - 16 - (r * 2); + const zoomInX = centerX - 8; + const resetX = centerX + 16 + (r * 2); return ( - - + - - + + + + - + strokeWidth={strokeWidth} + r={r} /> + + d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z" + fill={textFill} /> - - - + + + + - - + ); } private readonly handleZoomIn = () => { - if (this.interval) { return; } + if (this.interval) { + return; + } + this.zoom(-1); } private readonly handleZoomOut = () => { - if (this.interval) { return; } + if (this.interval) { + return; + } + this.zoom(1); } diff --git a/packages/stories/src/features/FullCanvas.stories.tsx b/packages/stories/src/features/FullCanvas.stories.tsx new file mode 100644 index 000000000..9fe5f0a9c --- /dev/null +++ b/packages/stories/src/features/FullCanvas.stories.tsx @@ -0,0 +1,9 @@ +import * as React from "react"; +import StockChart from "./stockChart"; + +export default { + component: StockChart, + title: "Features|Full Screen", +}; + +export const demo = () => ; diff --git a/packages/stories/src/features/stockChart.tsx b/packages/stories/src/features/stockChart.tsx index 05c2833e5..b89401394 100644 --- a/packages/stories/src/features/stockChart.tsx +++ b/packages/stories/src/features/stockChart.tsx @@ -5,6 +5,7 @@ import { Chart, ChartCanvas } from "react-financial-charts"; import { XAxis, YAxis } from "react-financial-charts/lib/axes"; import { CrossHairCursor, EdgeIndicator, MouseCoordinateX, MouseCoordinateY } from "react-financial-charts/lib/coordinates"; import { elderRay, ema } from "react-financial-charts/lib/indicator"; +import { ZoomButtons } from "react-financial-charts/lib/interactive"; import { discontinuousTimeScaleProviderBuilder } from "react-financial-charts/lib/scale"; import { BarSeries, CandlestickSeries, ElderRaySeries, LineSeries } from "react-financial-charts/lib/series"; import { MovingAverageTooltip, OHLCTooltip, SingleValueTooltip } from "react-financial-charts/lib/tooltip"; @@ -87,18 +88,6 @@ class StockChart extends React.Component { xAccessor={xAccessor} xExtents={xExtents} zoomAnchor={lastVisibleItemBasedZoomAnchor}> - - - - - { id={3} height={chartHeight} yExtents={this.candleChartExtents}> + + @@ -140,6 +135,9 @@ class StockChart extends React.Component { }, ]} /> + + + { yLabel="Elder Ray" yDisplayFormat={(d: any) => `${this.pricesDisplayFormat(d.bullPower)}, ${this.pricesDisplayFormat(d.bearPower)}`} origin={[8, 16]} /> +