Merge 2fee484 into a3ab296

airbnb · Mar 9, 2020 · db9d971 · db9d971
2 parents a3ab296 + 2fee484
commit db9d971
Show file tree

Hide file tree

Showing 15 changed files with 305 additions and 248 deletions.
diff --git a/packages/vx-demo/src/components/Gallery.tsx b/packages/vx-demo/src/components/Gallery.tsx
@@ -10,10 +10,10 @@ import Bars from './tiles/Bars';
 import Curves from '../docs-v2/examples/vx-curve/Example';
 import Dots from './tiles/Dots';
 import Patterns from './tiles/Patterns';
-import Gradients from './tiles/Gradients';
+import Gradients from '../docs-v2/examples/vx-gradient/Example';
 import Areas from './tiles/Areas';
 import StackedAreas from './tiles/Stacked-Areas';
-import Glyphs from './tiles/Glyphs';
+import Glyphs, { primary as glyphTextColor } from '../docs-v2/examples/vx-glyph/Example';
 import Axis, {
   backgroundColor as axisBackgroundColor,
   labelColor as axisTextColor,
@@ -228,12 +228,7 @@ export default function() {
                     <Gradients
                       width={width}
                       height={height + detailsHeight}
-                      margin={{
-                        top: 0,
-                        left: 0,
-                        right: 0,
-                        bottom: 80,
-                      }}
+                      margin={{ top: 0, right: 0, bottom: 80, left: 0 }}
                     />
                   )}
                 </ParentSize>
@@ -257,16 +252,16 @@ export default function() {
                       width={width}
                       height={height + detailsHeight}
                       margin={{
-                        top: 0,
-                        left: 0,
-                        right: 0,
+                        top: 5,
+                        left: 5,
+                        right: 5,
                         bottom: 80,
                       }}
                     />
                   )}
                 </ParentSize>
               </div>
-              <div className="details" style={{ color: 'rgba(126, 31, 220, 1.000)' }}>
+              <div className="details" style={{ color: glyphTextColor }}>
                 <div className="title">Glyphs</div>
                 <div className="description">
                   <pre>{'<Glyph.GlyphDot />'}</pre>
@@ -286,7 +281,7 @@ export default function() {
               <div className="details" style={{ color: axisTextColor }}>
                 <div className="title">Axis</div>
                 <div className="description">
-                  <pre>{'<Axis.AxisLeft /> + <Axis.AxisBottom />'}</pre>
+                  <pre>{'<Axis.AxisBottom />'}</pre>
                 </div>
               </div>
             </div>

diff --git a/packages/vx-demo/src/components/Show.tsx b/packages/vx-demo/src/components/Show.tsx
@@ -37,8 +37,7 @@ export default withScreenSize<ShowProps & WithScreenSizeProvidedProps>(
     description,
     codeSandboxDirectoryName,
   }: ShowProps & WithScreenSizeProvidedProps) => {
-    let width = (screenWidth || 0) - padding;
-    if (width > 800) width = 800;
+    const width = Math.min(800, (screenWidth || 0) - padding);
     const height = width * 0.6;
 
     return (

diff --git a/packages/vx-demo/src/components/tiles/Glyphs.tsx b/packages/vx-demo/src/components/tiles/Glyphs.tsx
diff --git a/packages/vx-demo/src/components/tiles/Gradients.tsx b/packages/vx-demo/src/components/tiles/Gradients.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-axis/Example.tsx b/packages/vx-demo/src/docs-v2/examples/vx-axis/Example.tsx
@@ -38,7 +38,7 @@ export default function Example({ width: outerWidth = 800, height: outerHeight =
     scale: Scale;
     values: ScaleInput[];
     label: string;
-    tickFormat: (value: ScaleInput) => string | number;
+    tickFormat: (value: ScaleInput, idx: number) => string | number;
   }[] = [
     {
       scale: scaleLinear({
@@ -66,7 +66,8 @@ export default function Example({ width: outerWidth = 800, height: outerHeight =
         range: [0, width],
       }),
       values: [new Date('2020-01-01'), new Date('2020-02-01'), new Date('2020-03-01')],
-      tickFormat: (v: Date) => (v.getDate() === 1 ? '🎉' : timeFormat('%b %d')(v)),
+      tickFormat: (v: Date, i: number) =>
+        v.getDate() === 1 ? '🎉' : width > 400 || i % 2 === 0 ? timeFormat('%b %d')(v) : '',
       label: 'time',
     },
     {