docs(xychart): add README, add docs/xychart page, add XYChart gallery…

… tile (#963) * docs(xychart): add README content * docs(xychart): add details sections to README * docs(demo): add docs/xychart, Gallery/XYChartTile * deps(xychart): bump react peerDep to 16.4 for PointerEvents * docs(xychart): flesh out more readme sections * docs(demo/xychart): tweak XYChartTile * docs(xychart): readme tweaks * new(demo/gallery): add XYChart tile * fix(demo/xychart): export Example props * docs(xychart): add ResizeObserver dependency note, add SVG 2.0 note * lint(demo/docs/xychart): readme => README * fix(demo/sandbox/xychart): remove 100% height in sandbox styles * deps(demo/sandbox/xychart): add missing react-spring dep * docs(xychart): add download badge, add install instructions
airbnb · Dec 15, 2020 · d6fe1f3 · d6fe1f3
1 parent 31087ed
commit d6fe1f3
Show file tree

Hide file tree

Showing 10 changed files with 430 additions and 5 deletions.
diff --git a/packages/visx-demo/src/components/Gallery/XYChartTile.tsx b/packages/visx-demo/src/components/Gallery/XYChartTile.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import XYChart, { XYChartProps } from '../../sandboxes/visx-xychart/Example';
+import GalleryTile from '../GalleryTile';
+
+export { default as packageJson } from '../../sandboxes/visx-xychart/package.json';
+
+const tileStyles = { background: '#222' };
+
+export default function XYChartITile() {
+  return (
+    <GalleryTile<XYChartProps>
+      title="XYChart"
+      description="<XYChart />"
+      exampleRenderer={XYChart}
+      exampleUrl="/xychart"
+      tileStyles={tileStyles}
+      detailsHeight={0}
+    />
+  );
+}
diff --git a/packages/visx-demo/src/components/Gallery/index.tsx b/packages/visx-demo/src/components/Gallery/index.tsx
@@ -44,6 +44,7 @@ import * as TooltipTile from './TooltipTile';
 import * as TreemapTile from './TreemapTile';
 import * as TreesTile from './TreesTile';
 import * as VoronoiTile from './VoronoiTile';
+import * as XYChartTile from './XYChartTile';
 import * as ZoomITile from './ZoomITile';
 import { VisxPackage } from '../../types';
 import exampleToVisxDependencyLookup, {
@@ -77,6 +78,7 @@ const tiles = [
   BarStackHorizontalTile,
   DendrogramsTile,
   DragIITile,
+  XYChartTile,
   GeoCustomTile,
   GeoMercatorTile,
   GlyphsTile,

diff --git a/packages/visx-demo/src/components/PackageList.tsx b/packages/visx-demo/src/components/PackageList.tsx
@@ -132,6 +132,16 @@ export default function PackageList({
               </Link>
               {!compact && <p>Difference charts to compare the delta between two time series</p>}
             </li>
+            <li className={cx(emphasizePackage === 'xychart' && 'emphasize')}>
+              <Link href="/docs/xychart">
+                <a>xychart</a>
+              </Link>
+              {!compact && (
+                <p>
+                  A chart-level API built on & integrated with several other visx building blocks
+                </p>
+              )}
+            </li>
           </ul>
         </div>
         <div>

diff --git a/packages/visx-demo/src/pages/docs/xychart.tsx b/packages/visx-demo/src/pages/docs/xychart.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import XYChartReadme from '!!raw-loader!../../../../visx-xychart/README.md';
+import * as XYChartPackage from '../../../../visx-xychart/src';
+import DocPage from '../../components/DocPage';
+import XYChartTile from '../../components/Gallery/XYChartTile';
+
+const components = Object.values(XYChartPackage);
+
+const examples = [XYChartTile];
+
+const XYChartDocs = () => (
+  <DocPage
+    components={components}
+    examples={examples}
+    readme={XYChartReadme}
+    visxPackage="xychart"
+  />
+);
+
+export default XYChartDocs;
diff --git a/packages/visx-demo/src/sandboxes/visx-xychart/Example.tsx b/packages/visx-demo/src/sandboxes/visx-xychart/Example.tsx
@@ -20,14 +20,14 @@ import {
 import ExampleControls from './ExampleControls';
 import CustomChartBackground from './CustomChartBackground';
 
-type Props = {
+export type XYChartProps = {
   width: number;
   height: number;
 };
 
 type City = 'San Francisco' | 'New York' | 'Austin';
 
-export default function Example({ height }: Props) {
+export default function Example({ height }: XYChartProps) {
   return (
     <ExampleControls>
       {({

diff --git a/packages/visx-demo/src/sandboxes/visx-xychart/package.json b/packages/visx-demo/src/sandboxes/visx-xychart/package.json
@@ -17,6 +17,7 @@
     "react": "^16",
     "react-dom": "^16",
     "react-scripts-ts": "3.1.0",
+    "react-spring": "^8.0.27",
     "typescript": "^3"
   },
   "keywords": [

diff --git a/packages/visx-demo/src/sandboxes/visx-xychart/sandbox-styles.css b/packages/visx-demo/src/sandboxes/visx-xychart/sandbox-styles.css
@@ -1,7 +1,6 @@
 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/visx-demo/src/types/index.ts b/packages/visx-demo/src/types/index.ts
@@ -50,6 +50,7 @@ export type VisxPackage =
   | 'tooltip'
   | 'voronoi'
   | 'visx'
+  | 'xychart'
   | 'zoom';
 
 export type PackageJson = { dependencies?: { [packageName: string]: string } };