feat: add exportImages: a function which exports graph layers as pngs

hoorayimhelping · hoorayimhelping · commit 066329fee39e · 2021-02-26T09:36:02.000-08:00
diff --git a/giraffe/package.json b/giraffe/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@influxdata/giraffe",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "main": "dist/index.js",
   "module": "src/index.js",
   "license": "MIT",
@@ -105,5 +105,8 @@
   "peerDependencies": {
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
+  },
+  "dependencies": {
+    "merge-images": "^2.0.0"
   }
 }
diff --git a/giraffe/src/components/Axes.tsx b/giraffe/src/components/Axes.tsx
@@ -1,5 +1,9 @@
-import * as React from 'react'
-import {useRef, useLayoutEffect, FunctionComponent, CSSProperties} from 'react'
+import React, {
+  CSSProperties,
+  FunctionComponent,
+  RefObject,
+  useLayoutEffect,
+} from 'react'
 
 import {TICK_PADDING_RIGHT, TICK_PADDING_TOP} from '../constants'
 import {clearCanvas} from '../utils/clearCanvas'
@@ -8,6 +12,7 @@ import {Margins, Scale, SizedConfig, Formatter, ColumnType} from '../types'
 import {PlotEnv} from '../utils/PlotEnv'
 
 interface Props {
+  canvasRef: RefObject<HTMLCanvasElement>
   env: PlotEnv
   style: CSSProperties
 }
@@ -186,9 +191,7 @@ export const drawAxes = ({
   }
 }
 
-export const Axes: FunctionComponent<Props> = ({env, style}) => {
-  const canvas = useRef<HTMLCanvasElement>(null)
-
+export const Axes: FunctionComponent<Props> = ({canvasRef, env, style}) => {
   const {
     innerWidth,
     innerHeight,
@@ -207,7 +210,7 @@ export const Axes: FunctionComponent<Props> = ({env, style}) => {
 
   useLayoutEffect(() => {
     drawAxes({
-      canvas: canvas.current,
+      canvas: canvasRef.current,
       innerWidth,
       innerHeight,
       margins,
@@ -223,7 +226,7 @@ export const Axes: FunctionComponent<Props> = ({env, style}) => {
       yColumnType,
     })
   }, [
-    canvas.current,
+    canvasRef.current,
     innerWidth,
     innerHeight,
     margins,
@@ -241,7 +244,7 @@ export const Axes: FunctionComponent<Props> = ({env, style}) => {
   return (
     <canvas
       className="giraffe-axes"
-      ref={canvas}
+      ref={canvasRef}
       style={style}
       data-testid="giraffe-axes"
     />
diff --git a/giraffe/src/components/BandLayer.tsx b/giraffe/src/components/BandLayer.tsx
@@ -1,5 +1,4 @@
-import * as React from 'react'
-import {useMemo, useRef, FunctionComponent} from 'react'
+import React, {FunctionComponent, RefObject, useMemo} from 'react'
 
 import {LayerProps, BandLayerSpec, BandLayerConfig} from '../types'
 import {BandHoverLayer} from './BandHoverLayer'
@@ -18,13 +17,24 @@ import {
 export interface Props extends LayerProps {
   spec: BandLayerSpec
   config: BandLayerConfig
+  canvasRef: RefObject<HTMLCanvasElement>
 }
 
 const HIGHLIGHT_HOVERED_LINE = 0.4
 const NO_HIGHLIGHT = 1
 
 export const BandLayer: FunctionComponent<Props> = props => {
-  const {config, spec, width, height, xScale, yScale, hoverX, hoverY} = props
+  const {
+    canvasRef,
+    config,
+    height,
+    hoverX,
+    hoverY,
+    spec,
+    width,
+    xScale,
+    yScale,
+  } = props
 
   const {
     lowerColumnName = '',
@@ -51,8 +61,6 @@ export const BandLayer: FunctionComponent<Props> = props => {
     shadeOpacity: config.shadeOpacity,
   }
 
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-
   useCanvas(
     canvasRef,
     width,
diff --git a/giraffe/src/components/LineLayer.tsx b/giraffe/src/components/LineLayer.tsx
@@ -1,5 +1,4 @@
-import * as React from 'react'
-import {useMemo, useRef, FunctionComponent} from 'react'
+import React, {FunctionComponent, RefObject, useMemo} from 'react'
 
 import {LayerProps, LineLayerSpec, LineLayerConfig} from '../types'
 import {LineHoverLayer} from './LineHoverLayer'
@@ -12,10 +11,21 @@ import {FILL} from '../constants/columnKeys'
 export interface Props extends LayerProps {
   spec: LineLayerSpec
   config: LineLayerConfig
+  canvasRef: RefObject<HTMLCanvasElement>
 }
 
 export const LineLayer: FunctionComponent<Props> = props => {
-  const {config, spec, width, height, xScale, yScale, hoverX, hoverY} = props
+  const {
+    config,
+    spec,
+    width,
+    height,
+    xScale,
+    yScale,
+    hoverX,
+    hoverY,
+    canvasRef,
+  } = props
   const {position} = config
 
   const simplifiedLineData = useMemo(
@@ -32,8 +42,6 @@ export const LineLayer: FunctionComponent<Props> = props => {
     shadeAboveY: height,
   }
 
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-
   useCanvas(
     canvasRef,
     width,
diff --git a/giraffe/src/components/Plot.tsx b/giraffe/src/components/Plot.tsx
@@ -1,5 +1,4 @@
-import * as React from 'react'
-import {FunctionComponent} from 'react'
+import React, {FunctionComponent, RefObject, useRef} from 'react'
 import AutoSizer from 'react-virtualized-auto-sizer'
 
 import {Config, SizedConfig, LayerTypes} from '../types'
@@ -10,13 +9,28 @@ import {get} from '../utils/get'
 
 interface Props {
   config: Config
+  axesCanvasRef?: RefObject<HTMLCanvasElement>
+  layerCanvasRef?: RefObject<HTMLCanvasElement>
 }
 
-export const Plot: FunctionComponent<Props> = ({config, children}) => {
+export const Plot: FunctionComponent<Props> = ({
+  config,
+  children,
+  axesCanvasRef = useRef<HTMLCanvasElement>(null),
+  layerCanvasRef = useRef<HTMLCanvasElement>(null),
+}) => {
   const graphType = get(config, 'layers.0.type')
 
   if (config.width && config.height) {
-    return <SizedPlot config={config as SizedConfig}>{children}</SizedPlot>
+    return (
+      <SizedPlot
+        config={config as SizedConfig}
+        axesCanvasRef={axesCanvasRef}
+        layerCanvasRef={layerCanvasRef}
+      >
+        {children}
+      </SizedPlot>
+    )
   }
 
   return (
@@ -38,7 +52,13 @@ export const Plot: FunctionComponent<Props> = ({config, children}) => {
           )
         }
         return (
-          <SizedPlot config={{...config, width, height}}>{children}</SizedPlot>
+          <SizedPlot
+            config={{...config, width, height}}
+            axesCanvasRef={axesCanvasRef}
+            layerCanvasRef={layerCanvasRef}
+          >
+            {children}
+          </SizedPlot>
         )
       }}
     </AutoSizer>
diff --git a/giraffe/src/components/RectLayer.tsx b/giraffe/src/components/RectLayer.tsx
@@ -1,5 +1,4 @@
-import * as React from 'react'
-import {useRef, FunctionComponent} from 'react'
+import React, {FunctionComponent, RefObject} from 'react'
 
 import {useCanvas} from '../utils/useCanvas'
 import {drawRects} from '../utils/drawRects'
@@ -14,6 +13,7 @@ import {RectLayerConfig, RectLayerSpec, LayerProps, TooltipData} from '../types'
 export interface Props extends LayerProps {
   spec: RectLayerSpec
   config: RectLayerConfig
+  canvasRef: RefObject<HTMLCanvasElement>
 }
 
 export const RectLayer: FunctionComponent<Props> = ({
@@ -27,6 +27,7 @@ export const RectLayer: FunctionComponent<Props> = ({
   hoverX,
   hoverY,
   columnFormatter,
+  canvasRef,
 }) => {
   const hoveredRowIndices = findHoveredRects(
     spec.table,
@@ -49,8 +50,6 @@ export const RectLayer: FunctionComponent<Props> = ({
     fillOpacity: config.fillOpacity,
   }
 
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-
   useCanvas(
     canvasRef,
     width,
diff --git a/giraffe/src/components/SizedPlot.test.tsx b/giraffe/src/components/SizedPlot.test.tsx
@@ -4,6 +4,8 @@ import {fireEvent, render, screen} from '@testing-library/react'
 
 import {PlotEnv} from '../utils/PlotEnv'
 
+import {LineLayerConfig, SizedConfig} from '../types'
+
 jest.mock('./Geo', () => <></>) // this component causes all sorts of loading problems
 
 import {newTable} from '../utils/newTable'
@@ -23,19 +25,23 @@ const layers = [
     type: 'line',
     x: '_time',
     y: '_value',
-  },
+    fill: [],
+  } as LineLayerConfig,
 ]
 
-const config = {
+const config: SizedConfig = {
   table,
   layers,
   showAxes: false,
-  width: '350px',
-  height: '350px',
+  width: 350,
+  height: 350,
 }
 
 const resetSpy = jest.spyOn(PlotEnv.prototype, 'resetDomains')
 
+const axesRef: React.RefObject<HTMLCanvasElement> = React.createRef()
+const layersRef: React.RefObject<HTMLCanvasElement> = React.createRef()
+
 describe('the SizedPlot', () => {
   describe('handling user interaction', () => {
     afterEach(() => {
@@ -44,7 +50,13 @@ describe('the SizedPlot', () => {
 
     describe('the default behavior', () => {
       it('handles double clicks', () => {
-        render(<SizedPlot config={config} />)
+        render(
+          <SizedPlot
+            config={config}
+            axesCanvasRef={axesRef}
+            layerCanvasRef={layersRef}
+          />
+        )
         fireEvent.doubleClick(screen.getByTestId('giraffe-inner-plot'))
 
         expect(resetSpy).toHaveBeenCalled()
@@ -59,7 +71,13 @@ describe('the SizedPlot', () => {
           interactionHandlers: {doubleClick: fakeDoubleClickInteractionHandler},
         }
 
-        render(<SizedPlot config={localConfig} />)
+        render(
+          <SizedPlot
+            config={localConfig}
+            axesCanvasRef={axesRef}
+            layerCanvasRef={layersRef}
+          />
+        )
         fireEvent.doubleClick(screen.getByTestId('giraffe-inner-plot'))
 
         expect(resetSpy).not.toHaveBeenCalled()
@@ -88,7 +106,13 @@ describe('the SizedPlot', () => {
           interactionHandlers: {hover: fakeHoverCallback},
         }
 
-        render(<SizedPlot config={localConfig} />)
+        render(
+          <SizedPlot
+            config={localConfig}
+            axesCanvasRef={axesRef}
+            layerCanvasRef={layersRef}
+          />
+        )
 
         fireEvent.mouseOver(screen.getByTestId('giraffe-inner-plot'))
 
diff --git a/giraffe/src/components/SizedPlot.tsx b/giraffe/src/components/SizedPlot.tsx
@@ -1,4 +1,9 @@
-import React, {useCallback, FunctionComponent, CSSProperties} from 'react'
+import React, {
+  CSSProperties,
+  FunctionComponent,
+  RefObject,
+  useCallback,
+} from 'react'
 
 import {Axes} from './Axes'
 import {
@@ -34,11 +39,15 @@ import {AnnotationLayer} from './AnnotationLayer'
 
 interface Props {
   config: SizedConfig
+  axesCanvasRef: RefObject<HTMLCanvasElement>
+  layerCanvasRef: RefObject<HTMLCanvasElement>
 }
 
 export const SizedPlot: FunctionComponent<Props> = ({
   config: userConfig,
   children,
+  axesCanvasRef,
+  layerCanvasRef,
 }) => {
   const env = usePlotEnv(userConfig)
   const forceUpdate = useForceUpdate()
@@ -120,7 +129,9 @@ export const SizedPlot: FunctionComponent<Props> = ({
         userSelect: 'none',
       }}
     >
-      {showAxes && <Axes env={env} style={fullsizeStyle} />}
+      {showAxes && (
+        <Axes env={env} canvasRef={axesCanvasRef} style={fullsizeStyle} />
+      )}
       <div
         className="giraffe-inner-plot"
         data-testid="giraffe-inner-plot"
@@ -211,6 +222,7 @@ export const SizedPlot: FunctionComponent<Props> = ({
               case SpecTypes.Line:
                 return (
                   <LineLayer
+                    canvasRef={layerCanvasRef}
                     key={layerIndex}
                     {...sharedProps}
                     spec={spec}
@@ -221,6 +233,7 @@ export const SizedPlot: FunctionComponent<Props> = ({
               case SpecTypes.Band:
                 return (
                   <BandLayer
+                    canvasRef={layerCanvasRef}
                     key={layerIndex}
                     {...sharedProps}
                     spec={spec}
@@ -241,6 +254,7 @@ export const SizedPlot: FunctionComponent<Props> = ({
               case SpecTypes.Rect:
                 return (
                   <RectLayer
+                    canvasRef={layerCanvasRef}
                     key={layerIndex}
                     {...sharedProps}
                     spec={spec}
diff --git a/giraffe/src/index.ts b/giraffe/src/index.ts
@@ -13,6 +13,8 @@ export {
 } from './utils/formatters'
 export {getDomainDataFromLines} from './utils/lineData'
 
+export {exportImage} from './utils/exportImage'
+
 // Transforms
 export {lineTransform} from './transforms/line'
 
diff --git a/giraffe/src/utils/exportImage.ts b/giraffe/src/utils/exportImage.ts
diff --git a/stories/src/utilities.stories.tsx b/stories/src/utilities.stories.tsx
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@influxdata/giraffe",`
`3`		`- "version": "2.2.0",`
	`3`	`+ "version": "2.3.0",`
`4`	`4`	`"main": "dist/index.js",`
`5`	`5`	`"module": "src/index.js",`
`6`	`6`	`"license": "MIT",`
`@@ -105,5 +105,8 @@`
`105`	`105`	`"peerDependencies": {`
`106`	`106`	`"react": "^16.8.0",`
`107`	`107`	`"react-dom": "^16.8.0"`
	`108`	`+ },`
	`109`	`+ "dependencies": {`
	`110`	`+ "merge-images": "^2.0.0"`
`108`	`111`	`}`
`109`	`112`	`}`