fix: tweak position-viewer

AutoScheduleJS · Oct 10, 2018 · f522af4 · f522af4
1 parent 3921306
commit f522af4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/src/web/line-area/line-area.tsx b/src/web/line-area/line-area.tsx
@@ -90,7 +90,7 @@ const divisorClass = (theme: LineAreaTheme) => {
 
 const createDivisors = (division: number, width: number, height: number, theme: any) => {
   const step = width / division;
-  return Array(division)
+  return Array(division + 1)
     .fill(null)
     .map((_, i) => <circle cx={i * step} cy={height} r={2} className={divisorClass(theme)} />);
 };
@@ -115,13 +115,14 @@ class LineAreaImpl extends React.PureComponent<LineAreaProps> {
       points.map(pair => [pair[0] * abscissaUnit, pair[1] * baseHeight] as [number, number])
     );
     const divisors = createDivisors(division, width, baseHeight, theme);
+    const widthMargin = 3;
     return (
       <svg
-        width={width}
+        width={width + widthMargin * 2}
         height={height}
         ref={forwardedRef}
         {...hostProps}
-        viewBox={`0 -10 ${width} ${height}`}
+        viewBox={`-${widthMargin} -10 ${width + widthMargin * 2} ${height}`}
       >
         <path {...lineClass(theme)} d={path} />
         <line x1={0} y1={baseHeight} x2={width} y2={baseHeight} className={abscisseClass(theme)} />

diff --git a/src/web/st-position-viewer.tsx b/src/web/st-position-viewer.tsx
@@ -89,24 +89,25 @@ const positionToPoints = (
   const end = getTipRange(position, 'end', config);
   const startArr = tipRangeToPoints(start, origin, 'start');
   const endArr = tipRangeToPoints(end, origin, 'end');
-  console.log('points', [...startArr, ...endArr], start, end);
   return [...startArr, ...endArr];
 };
 
 class StPositionViewerImpl extends React.PureComponent<
   PositionViewerProps & PositionViewerFromState
 > {
+  abscissaUnit = 1;
+
   render() {
     const { position, config, ...defaultHostProps } = this.props;
-    const points = positionToPoints(position, config, 25);
-
+    const points = positionToPoints(position, config, 0);
+    const width = (config.endDate - config.startDate) * this.abscissaUnit;
     return (
       <div {...defaultHostProps}>
         <LineArea
-          width={150}
-          height={80}
-          abscissaUnit={1}
-          ordinateUnit={65}
+          width={width}
+          height={40}
+          abscissaUnit={this.abscissaUnit}
+          ordinateUnit={29}
           points={points}
           division={10}
         />