Merge 652b44f into b936fe1

airbnb · May 9, 2020 · e94f64c · e94f64c
2 parents b936fe1 + 652b44f
commit e94f64c
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 13 deletions.
diff --git a/packages/vx-demo/src/components/Gallery.tsx b/packages/vx-demo/src/components/Gallery.tsx
@@ -28,7 +28,7 @@ import Trees from './tiles/Trees';
 import Dendrograms from './tiles/Dendrograms';
 import Voronoi from './tiles/Voronoi';
 import Legends from './tiles/Legends';
-import StatsPlot from './tiles/Statsplot';
+import StatsPlot from '../docs-v2/examples/vx-stats/Example';
 import GeoCustom from '../docs-v2/examples/vx-geo-custom/Example';
 import GeoMercator from '../docs-v2/examples/vx-geo-mercator/Example';
 import Network from './tiles/Network';

diff --git a/...x-demo/src/components/tiles/Statsplot.tsx → ...src/docs-v2/examples/vx-stats/Example.tsx b/...x-demo/src/components/tiles/Statsplot.tsx → ...src/docs-v2/examples/vx-stats/Example.tsx
@@ -4,10 +4,9 @@ import { ViolinPlot, BoxPlot } from '@vx/stats';
 import { LinearGradient } from '@vx/gradient';
 import { scaleBand, scaleLinear } from '@vx/scale';
 import genStats, { Stats } from '@vx/mock-data/lib/generators/genStats';
-import { withTooltip, Tooltip } from '@vx/tooltip';
+import { withTooltip, Tooltip, defaultStyles as defaultTooltipStyles } from '@vx/tooltip';
 import { WithTooltipProvidedProps } from '@vx/tooltip/lib/enhancers/withTooltip';
 import { PatternLines } from '@vx/pattern';
-import { ShowProvidedProps } from '../../types';
 
 const data: Stats[] = genStats(5);
 
@@ -29,7 +28,12 @@ interface TooltipData {
   thirdQuartile?: number;
 }
 
-export default withTooltip<ShowProvidedProps, TooltipData>(
+type Props = {
+  width: number;
+  height: number;
+};
+
+export default withTooltip<Props, TooltipData>(
   ({
     width,
     height,
@@ -39,9 +43,7 @@ export default withTooltip<ShowProvidedProps, TooltipData>(
     tooltipData,
     showTooltip,
     hideTooltip,
-  }: ShowProvidedProps & WithTooltipProvidedProps<TooltipData>) => {
-    if (width < 10) return null;
-
+  }: Props & WithTooltipProvidedProps<TooltipData>) => {
     // bounds
     const xMax = width;
     const yMax = height - 120;
@@ -68,7 +70,7 @@ export default withTooltip<ShowProvidedProps, TooltipData>(
     const boxWidth = xScale.bandwidth();
     const constrainedWidth = Math.min(40, boxWidth);
 
-    return (
+    return width < 10 ? null : (
       <div style={{ position: 'relative' }}>
         <svg width={width} height={height}>
           <LinearGradient id="statsplot" to="#8b6ce7" from="#87f2d4" />
@@ -180,7 +182,7 @@ export default withTooltip<ShowProvidedProps, TooltipData>(
           <Tooltip
             top={tooltipTop}
             left={tooltipLeft}
-            style={{ backgroundColor: '#283238', color: 'white' }}
+            style={{ ...defaultTooltipStyles, backgroundColor: '#283238', color: 'white' }}
           >
             <div>
               <strong>{tooltipData.name}</strong>

diff --git a/packages/vx-demo/src/docs-v2/examples/vx-stats/index.tsx b/packages/vx-demo/src/docs-v2/examples/vx-stats/index.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from 'react-dom';
+import ParentSize from '@vx/responsive/lib/components/ParentSize';
+
+import Example from './Example';
+import './sandbox-styles.css';
+
+render(
+  <ParentSize>{({ width, height }) => <Example width={width} height={height} />}</ParentSize>,
+  document.getElementById('root'),
+);
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-stats/package.json b/packages/vx-demo/src/docs-v2/examples/vx-stats/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@vx/demo-stats",
+  "description": "Standalone vx stats demo.",
+  "main": "index.tsx",
+  "dependencies": {
+    "@babel/runtime": "^7.8.4",
+    "@types/react": "^16",
+    "@types/react-dom": "^16",
+    "@vx/gradient": "latest",
+    "@vx/group": "latest",
+    "@vx/mock-data": "latest",
+    "@vx/pattern": "latest",
+    "@vx/responsive": "latest",
+    "@vx/scale": "latest",
+    "@vx/stats": "latest",
+    "@vx/tooltip": "latest",
+    "react": "^16",
+    "react-dom": "^16",
+    "react-scripts-ts": "3.1.0",
+    "typescript": "^3"
+  },
+  "keywords": [
+    "visualization",
+    "d3",
+    "react",
+    "vx",
+    "stats",
+    "boxplot",
+    "violin plot"
+  ]
+}
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-stats/sandbox-styles.css b/packages/vx-demo/src/docs-v2/examples/vx-stats/sandbox-styles.css
@@ -0,0 +1,8 @@
+html,
+body,
+#root {
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Open Sans', 'Helvetica Neue', sans-serif;
+  line-height: 2em;
+}
diff --git a/packages/vx-demo/src/pages/Statsplot.tsx b/packages/vx-demo/src/pages/Statsplot.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import Show from '../components/Show';
-import StatsPlot from '../components/tiles/Statsplot';
-import StatsPlotSource from '!!raw-loader!../components/tiles/Statsplot';
+import StatsPlot from '../docs-v2/examples/vx-stats/Example';
+import StatsPlotSource from '!!raw-loader!../docs-v2/examples/vx-stats/Example';
 
 export default () => (
   <Show
     events
-    margin={{ top: 80, right: 0, bottom: 0, left: 0 }}
     component={StatsPlot}
-    title="BoxPlot With ViolinPlot"
+    title="BoxPlot + ViolinPlot"
+    codeSandboxDirectoryName="vx-stats"
   >
     {StatsPlotSource}
   </Show>