elastic · markov00 · Apr 28, 2020 · Apr 21, 2020 · Apr 24, 2020 · Apr 24, 2020
diff --git a/.gitignore b/.gitignore
@@ -7,6 +7,7 @@ test/failure-screenshots/**/*.png
 
 reports/
 tmp/
+.temp/
 dist/
 coverage/
 .out/

diff --git a/.playground/index.html b/.playground/index.html
@@ -29,10 +29,13 @@
         /*display: inline-block;
         position: relative;
         */
-        width: 300px;
+        width: 500px;
         height: 300px;
         margin: 20px;
       }
+      label {
+        display: block;
+      }
     </style>
   </head>
   <body>

diff --git a/.playground/playground.tsx b/.playground/playground.tsx
@@ -17,43 +17,249 @@
  * under the License. */
 
 import React from 'react';
-import { Chart, Partition, Settings, PartitionLayout, XYChartElementEvent, PartitionElementEvent } from '../src';
+import {
+  Chart,
+  ScaleType,
+  Settings,
+  RectAnnotation,
+  LineAnnotation,
+  TooltipType,
+  BarSeries,
+  LineSeries,
+  Axis,
+  Position,
+} from '../src';
 
-export class Playground extends React.Component {
-  onElementClick = (elements: (XYChartElementEvent | PartitionElementEvent)[]) => {
-    // eslint-disable-next-line no-console
-    console.log(elements);
+// const data = [
+//   { x: 0, min: 0, max: 1 },
+//   { x: 10, min: 0, max: 2 },
+//   // { x: 2, min: 0, max: 3 },
+// ];
+
+const data = new Array(10).fill(0).map((d, i) => {
+  return {
+    x: i,
+    y: Math.random() * 10,
+  };
+});
+
+// data = [
+//   { x: 0, y: 4 },
+//   { x: 1, y: 1 },
+//   { x: 10, y: 3 },
+//   // { x: 3, y: 2 },
+// ];
+interface State {
+  showRectAnnotation: boolean;
+  showLineXAnnotation: boolean;
+  showLineYAnnotation: boolean;
+  totalBars: number;
+  useLinearBar: boolean;
+  useOrdinalBar: boolean;
+  useHistogramBar: boolean;
+  totalLines: number;
+  useLinearLine: boolean;
+  useOrdinalLine: boolean;
+}
+export class Playground extends React.Component<{}, State> {
+  state: State = {
+    showRectAnnotation: true,
+    showLineXAnnotation: true,
+    showLineYAnnotation: false,
+    totalBars: 1,
+    totalLines: 1,
+    useLinearBar: false,
+    useOrdinalBar: false,
+    useHistogramBar: true,
+    useLinearLine: false,
+    useOrdinalLine: false,
+  };
+  handleInputChange = (stateParam: keyof State) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    const updatedValue = stateParam === 'totalBars' || stateParam === 'totalLines' ? Number(event.target.value) : 1;
+    this.setState((prevState: State) => {
+      return {
+        ...prevState,
+        [stateParam]: stateParam === 'totalBars' || stateParam === 'totalLines' ? updatedValue : !prevState[stateParam],
+      };
+    });
   };
   render() {
+    const keys: Array<keyof State> = [
+      'showRectAnnotation',
+      'showLineXAnnotation',
+      'showLineYAnnotation',
+      'useLinearBar',
+      'useOrdinalBar',
+      'useHistogramBar',
+      'useLinearLine',
+      'useOrdinalLine',
+      'totalBars',
+      'totalLines',
+    ];
     return (
-      <div className="chart">
-        <Chart>
-          <Settings onElementClick={this.onElementClick} />
-          <Partition
-            id="111"
-            config={{
-              partitionLayout: PartitionLayout.treemap,
-            }}
-            valueAccessor={(d: { v: number }) => {
-              return d.v;
-            }}
-            data={[
-              { g1: 'a', g2: 'a', v: 1 },
-              { g1: 'a', g2: 'b', v: 1 },
-              { g1: 'b', g2: 'a', v: 1 },
-              { g1: 'b', g2: 'b', v: 1 },
-            ]}
-            layers={[
-              {
-                groupByRollup: (datum: { g1: string }) => datum.g1,
-              },
-              {
-                groupByRollup: (datum: { g2: string }) => datum.g2,
-              },
-            ]}
-          />
-        </Chart>
-      </div>
+      <>
+        <div>
+          <form>
+            {keys.map((key) => {
+              return (
+                <label key={key}>
+                  {key}
+                  {key === 'totalBars' || key === 'totalLines' ? (
+                    <input type="number" value={this.state[key]} onChange={this.handleInputChange(key)} />
+                  ) : (
+                    <input type="checkbox" checked={this.state[key]} onChange={this.handleInputChange(key)} />
+                  )}
+                </label>
+              );
+            })}
+          </form>
+        </div>
+        <div className="chart">
+          <Chart>
+            <Settings
+              tooltip={TooltipType.None}
+              rotation={0}
+              theme={{
+                lineSeriesStyle: {
+                  point: {
+                    visible: true,
+                    fill: 'transparent',
+                  },
+                },
+                barSeriesStyle: {
+                  rect: {
+                    opacity: 0.5,
+                  },
+                },
+                scales: { barsPadding: 0, histogramPadding: 0 },
+                chartPaddings: { bottom: 0, left: 0, top: 0, right: 0 },
+                chartMargins: { bottom: 0, left: 0, top: 0, right: 0 },
+              }}
+            />
+            <Axis id="y" position={Position.Left} />
+            <Axis id="x" position={Position.Bottom} />
+            {this.state.showRectAnnotation && (
+              <RectAnnotation
+                id="annotation"
+                dataValues={[
+                  // { coordinates: { x0: 1, x1: null, y0: null, y1: null } },
+                  // { coordinates: { x0: null, x1: 1, y0: null, y1: null } },
+                  { coordinates: { x0: null, x1: null, y0: 1, y1: null } },
+                  // { coordinates: { x0: null, x1: null, y0: null, y1: 1 } },
+                ]}
+                style={{
+                  fill: 'red',
+                  opacity: 0.25,
+                }}
+              />
+            )}
+            {this.state.showLineYAnnotation && (
+              <LineAnnotation
+                id="lineany"
+                dataValues={[
+                  { dataValue: 2, details: 'foo' },
+                  // {
+                  //   dataValue: -0.5,
+                  //   details: 'aaa',
+                  //   header: 'aaa',
+                  // },
+                ]}
+                domainType="yDomain"
+                marker={<div style={{ width: 10, height: 10, background: 'red' }}></div>}
+              />
+            )}
+            {this.state.showLineXAnnotation && (
+              <LineAnnotation
+                id="lineanx"
+                dataValues={[
+                  {
+                    dataValue: 9.5,
+                    details: 'aaa',
+                    header: 'aaa',
+                  },
+                ]}
+                domainType="xDomain"
+                marker={<div style={{ width: 10, height: 10, background: 'rgba(255, 0, 0, 0.3)' }}></div>}
+              />
+            )}
+            {this.state.useLinearBar &&
+              new Array(this.state.totalBars)
+                .fill(0)
+                .map((d, i) => (
+                  <BarSeries
+                    key={`linearBar${i}`}
+                    id={`linearBar${i}`}
+                    xScaleType={ScaleType.Linear}
+                    yScaleType={ScaleType.Linear}
+                    xAccessor="x"
+                    yAccessors={['y']}
+                    data={data}
+                  />
+                ))}
+
+            {this.state.useOrdinalBar &&
+              new Array(this.state.totalBars)
+                .fill(0)
+                .map((d, i) => (
+                  <BarSeries
+                    key={`ordinalBar${i}`}
+                    id={`ordinalBar${i}`}
+                    xScaleType={ScaleType.Ordinal}
+                    yScaleType={ScaleType.Linear}
+                    xAccessor="x"
+                    yAccessors={['y']}
+                    data={data}
+                  />
+                ))}
+
+            {this.state.useHistogramBar &&
+              new Array(this.state.totalBars)
+                .fill(0)
+                .map((d, i) => (
+                  <BarSeries
+                    key={`histoBar${i}`}
+                    id={`histoBar${i}`}
+                    enableHistogramMode
+                    xScaleType={ScaleType.Linear}
+                    yScaleType={ScaleType.Linear}
+                    xAccessor="x"
+                    yAccessors={['y']}
+                    data={data}
+                  />
+                ))}
+
+            {this.state.useOrdinalLine &&
+              new Array(this.state.totalLines)
+                .fill(0)
+                .map((d, i) => (
+                  <LineSeries
+                    key={`ordinalLines${i}`}
+                    id={`ordinalLines${i}`}
+                    xScaleType={ScaleType.Ordinal}
+                    yScaleType={ScaleType.Linear}
+                    xAccessor="x"
+                    yAccessors={['y']}
+                    data={data}
+                  />
+                ))}
+
+            {this.state.useLinearLine &&
+              new Array(this.state.totalLines)
+                .fill(0)
+                .map((d, i) => (
+                  <LineSeries
+                    key={`linearLines${i}`}
+                    id={`linearLines${i}`}
+                    xScaleType={ScaleType.Linear}
+                    yScaleType={ScaleType.Linear}
+                    xAccessor="x"
+                    yAccessors={['y']}
+                    data={data}
+                  />
+                ))}
+          </Chart>
+        </div>
+      </>
     );
   }
 }
diff --git a/...ll-stories-annotations-rects-linear-bar-chart-visually-looks-correct-1-snap.png b/...ll-stories-annotations-rects-linear-bar-chart-visually-looks-correct-1-snap.png
diff --git a/...l-stories-annotations-rects-linear-line-chart-visually-looks-correct-1-snap.png b/...l-stories-annotations-rects-linear-line-chart-visually-looks-correct-1-snap.png
diff --git a/...l-stories-annotations-rects-ordinal-bar-chart-visually-looks-correct-1-snap.png b/...l-stories-annotations-rects-ordinal-bar-chart-visually-looks-correct-1-snap.png
diff --git a/...-stories-annotations-rects-tooltip-visibility-visually-looks-correct-1-snap.png b/...-stories-annotations-rects-tooltip-visibility-visually-looks-correct-1-snap.png
diff --git a/...-stories-bar-chart-test-histogram-mode-linear-visually-looks-correct-1-snap.png b/...-stories-bar-chart-test-histogram-mode-linear-visually-looks-correct-1-snap.png
diff --git a/...test-histogram-mode-linear-enable-histogram-mode-is-false-rotation-0-1-snap.png b/...test-histogram-mode-linear-enable-histogram-mode-is-false-rotation-0-1-snap.png
diff --git a/...st-histogram-mode-linear-enable-histogram-mode-is-false-rotation-180-1-snap.png b/...st-histogram-mode-linear-enable-histogram-mode-is-false-rotation-180-1-snap.png
diff --git a/...est-histogram-mode-linear-enable-histogram-mode-is-false-rotation-90-1-snap.png b/...est-histogram-mode-linear-enable-histogram-mode-is-false-rotation-90-1-snap.png
diff --git a/...gram-mode-linear-enable-histogram-mode-is-false-rotation-negative-90-1-snap.png b/...gram-mode-linear-enable-histogram-mode-is-false-rotation-negative-90-1-snap.png
diff --git a/...-test-histogram-mode-linear-enable-histogram-mode-is-true-rotation-0-1-snap.png b/...-test-histogram-mode-linear-enable-histogram-mode-is-true-rotation-0-1-snap.png
diff --git a/...est-histogram-mode-linear-enable-histogram-mode-is-true-rotation-180-1-snap.png b/...est-histogram-mode-linear-enable-histogram-mode-is-true-rotation-180-1-snap.png
diff --git a/...test-histogram-mode-linear-enable-histogram-mode-is-true-rotation-90-1-snap.png b/...test-histogram-mode-linear-enable-histogram-mode-is-true-rotation-90-1-snap.png
diff --git a/...ogram-mode-linear-enable-histogram-mode-is-true-rotation-negative-90-1-snap.png b/...ogram-mode-linear-enable-histogram-mode-is-true-rotation-negative-90-1-snap.png
diff --git a/...bar-series-stories-test-histogram-mode-linear-point-alignment-center-1-snap.png b/...bar-series-stories-test-histogram-mode-linear-point-alignment-center-1-snap.png
diff --git a/...ts-bar-series-stories-test-histogram-mode-linear-point-alignment-end-1-snap.png b/...ts-bar-series-stories-test-histogram-mode-linear-point-alignment-end-1-snap.png
diff --git a/...-bar-series-stories-test-histogram-mode-linear-point-alignment-start-1-snap.png b/...-bar-series-stories-test-histogram-mode-linear-point-alignment-start-1-snap.png
diff --git a/src/chart_types/xy_chart/annotations/annotation_marker.test.tsx b/src/chart_types/xy_chart/annotations/annotation_marker.test.tsx
@@ -23,9 +23,10 @@ import { DEFAULT_ANNOTATION_LINE_STYLE } from '../../../utils/themes/theme';
 import { Dimensions } from '../../../utils/dimensions';
 import { GroupId } from '../../../utils/ids';
 import { Scale, ScaleType, ScaleContinuous } from '../../../scales';
-import { computeLineAnnotationDimensions, AnnotationLineProps } from './line_annotation_tooltip';
-import { ChartTypes } from '../..';
 import { SpecTypes } from '../../../specs/settings';
+import { computeLineAnnotationDimensions } from './line/dimensions';
+import { AnnotationLineProps } from './line/types';
+import { ChartTypes } from '../..';
 
 describe('annotation marker', () => {
   const groupId = 'foo-group';
@@ -75,7 +76,6 @@ describe('annotation marker', () => {
       yScales,
       xScale,
       Position.Left,
-      0,
       false,
     );
     const expectedDimensions: AnnotationLineProps[] = [
@@ -130,7 +130,6 @@ describe('annotation marker', () => {
       yScales,
       xScale,
       Position.Left,
-      0,
       false,
     );
     const expectedDimensions: AnnotationLineProps[] = [
@@ -184,7 +183,6 @@ describe('annotation marker', () => {
       yScales,
       xScale,
       Position.Bottom,
-      0,
       false,
     );
     const expectedDimensions: AnnotationLineProps[] = [

diff --git a/src/chart_types/xy_chart/annotations/annotation_tooltip.ts b/src/chart_types/xy_chart/annotations/annotation_tooltip.ts
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,6 +7,7 @@ test/failure-screenshots/**/*.png @@
     reports/
     tmp/
+    .temp/
     dist/
     coverage/
     .out/
@@ Expand Down @@