@elastic/charts - npm Package Compare versions

Comparing version 6.0.0 to 6.0.1

CHANGELOG.md

@@ -0,1 +1,8 @@
+## [6.0.1](https://github.com/elastic/elastic-charts/compare/v6.0.0...v6.0.1) (2019-06-14)
+
+
+### Bug Fixes
+
+* **line_annotation:** use scaleAndValidate for line annotations ([#236](https://github.com/elastic/elastic-charts/issues/236)) ([48b180a](https://github.com/elastic/elastic-charts/commit/48b180a))
+
 # [6.0.0](https://github.com/elastic/elastic-charts/compare/v5.2.0...v6.0.0) (2019-06-13)
@@ -2,0 +9,0 @@

dist/components/highlighter.js

@@ -37,3 +37,3 @@ "use strict";
                 }
-                return (react_1.default.createElement("rect", { key: i, x: x, y: y, width: geom.width, height: geom.height, fill: "white", opacity: 0.4 }));
+                return react_1.default.createElement("rect", { key: i, x: x, y: y, width: geom.width, height: geom.height, fill: "white", opacity: 0.4 });
             }))));
@@ -40,0 +40,0 @@ };

dist/components/icons/assets/question_in_circle.js

@@ -21,3 +21,2 @@ "use strict";
     return (react_1.default.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16" }, extraProps),
-        ">",
         react_1.default.createElement("path", { d: "M8 14A6 6 0 1 1 8 2a6 6 0 0 1 0 12zm0-1A5 5 0 1 0 8 3a5 5 0 0 0 0 10zm-.186-1.065A.785.785 0 0 1 7 11.12c0-.48.34-.82.814-.82.475 0 .809.34.809.82 0 .475-.334.815-.809.815zM5.9 6.317C5.96 5.168 6.755 4.4 8.048 4.4c1.218 0 2.091.759 2.091 1.8 0 .736-.36 1.304-1.03 1.707-.56.33-.717.56-.717 1.022v.305l-.1.1H7.47l-.1-.1v-.431c-.005-.646.302-1.104.987-1.514.527-.322.708-.59.708-1.047 0-.536-.416-.91-1.05-.91-.652 0-1.064.374-1.112.998l-.1.092H6l-.1-.105z" })));
@@ -24,0 +23,0 @@ }

dist/components/icons/icon.d.ts

@@ -1,2 +0,2 @@
-import { FunctionComponent, SVGAttributes } from 'react';
+import { SVGAttributes } from 'react';
 import { AlertIcon } from './assets/alert';
@@ -28,4 +28,4 @@ import { DotIcon } from './assets/dot';
 }
-export declare type Props = Omit<SVGAttributes<SVGElement>, 'color'> & IconProps;
-export declare const Icon: FunctionComponent<Props>;
+export declare type Props = Omit<SVGAttributes<SVGElement>, 'color' | 'type'> & IconProps;
+export declare const Icon: (props: Props) => JSX.Element;
 export {};

dist/components/icons/icon.js

@@ -44,4 +44,4 @@ "use strict";
 };
-exports.Icon = function (_a) {
-    var type = _a.type, color = _a.color, className = _a.className, tabIndex = _a.tabIndex, rest = __rest(_a, ["type", "color", "className", "tabIndex"]);
+exports.Icon = function (props) {
+    var type = props.type, color = props.color, className = props.className, tabIndex = props.tabIndex, rest = __rest(props, ["type", "color", "className", "tabIndex"]);
     var optionalCustomStyles = null;
@@ -60,4 +60,4 @@ if (color) {
     var focusable = tabIndex == null || tabIndex === -1 ? 'false' : 'true';
-    return (react_1.default.createElement(Svg, __assign({ className: classes }, optionalCustomStyles, { tabIndex: tabIndex, focusable: focusable }, rest)));
+    return react_1.default.createElement(Svg, __assign({ className: classes }, optionalCustomStyles, { tabIndex: tabIndex, focusable: focusable }, rest));
 };
 //# sourceMappingURL=icon.js.map

dist/components/legend/legend_item.js

@@ -46,2 +46,3 @@ "use strict";
         }; };
+        // Keeping these as reference when we have a contextual panel
         // private onLegendItemPanelClose = () => {
@@ -48,0 +49,0 @@ //   // tslint:disable-next-line:no-console

dist/components/legend/legend.js

@@ -77,3 +77,3 @@ "use strict";
             var props = { color: color, label: label, isSeriesVisible: isSeriesVisible, legendItemKey: legendItemKey, displayValue: display };
-            return (react_1.default.createElement(legend_item_1.LegendItem, __assign({}, props, { key: legendItemKey, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave })));
+            return react_1.default.createElement(legend_item_1.LegendItem, __assign({}, props, { key: legendItemKey, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }));
         };
@@ -86,6 +86,3 @@ return _this;
         var _a = this.props.chartStore, initialized = _a.initialized, legendItems = _a.legendItems, legendPosition = _a.legendPosition, showLegend = _a.showLegend, legendCollapsed = _a.legendCollapsed, debug = _a.debug, chartTheme = _a.chartTheme;
-        if (!showLegend.get() ||
-            !initialized.get() ||
-            legendItems.size === 0 ||
-            legendPosition === undefined) {
+        if (!showLegend.get() || !initialized.get() || legendItems.size === 0 || legendPosition === undefined) {
             return null;
@@ -92,0 +89,0 @@ }

dist/components/react_canvas/area_geometries.js

@@ -84,3 +84,3 @@ "use strict";
                     areaPointElements.push(react_1.default.createElement(react_konva_1.Group, { key: "area-point-group-" + areaIndex + "-" + pointIndex, x: transform.x },
-                        react_1.default.createElement(renderprops_konva_cjs_1.Spring, { native: true, from: { y: y }, to: { y: y } }, function (props) {
+                        react_1.default.createElement(renderprops_konva_cjs_1.Spring, { native: true, from: { y: y }, to: { y: y } }, function () {
                             var pointProps = rendering_props_utils_1.buildAreaPointProps({
@@ -87,0 +87,0 @@ areaIndex: areaIndex,

dist/components/react_canvas/axis.js

@@ -72,3 +72,3 @@ "use strict";
             return (react_1.default.createElement(react_konva_1.Group, { x: axisPosition.left, y: axisPosition.top },
-                debug && (react_1.default.createElement(react_konva_1.Rect, { x: 0, y: 0, width: axisPosition.width, height: axisPosition.height, fill: 'blue' })),
+                debug && react_1.default.createElement(react_konva_1.Rect, { x: 0, y: 0, width: axisPosition.width, height: axisPosition.height, fill: 'blue' }),
                 react_1.default.createElement(react_konva_1.Group, { key: "lines" }, _this.renderAxisLine()),
@@ -91,10 +91,4 @@ react_1.default.createElement(react_konva_1.Group, { key: "tick-lines" }, ticks.map(_this.renderTickLine)),
                 lineProps[2] = axisPosition.width;
-                lineProps[1] =
-                    position === specs_1.Position.Top
-                        ? axisTicksDimensions.maxLabelBboxHeight + tickSize + tickPadding
-                        : 0;
-                lineProps[3] =
-                    position === specs_1.Position.Top
-                        ? axisTicksDimensions.maxLabelBboxHeight + tickSize + tickPadding
-                        : 0;
+                lineProps[1] = position === specs_1.Position.Top ? axisTicksDimensions.maxLabelBboxHeight + tickSize + tickPadding : 0;
+                lineProps[3] = position === specs_1.Position.Top ? axisTicksDimensions.maxLabelBboxHeight + tickSize + tickPadding : 0;
             }
@@ -137,5 +131,3 @@ return react_1.default.createElement(react_konva_1.Line, __assign({ points: lineProps }, axisLineStyle));
         }
-        var top = position === specs_1.Position.Top
-            ? -maxLabelBboxHeight - padding
-            : maxLabelBboxHeight + tickPadding + tickSize + padding;
+        var top = position === specs_1.Position.Top ? -maxLabelBboxHeight - padding : maxLabelBboxHeight + tickPadding + tickSize + padding;
         var left = 0;
@@ -142,0 +134,0 @@ return (react_1.default.createElement(react_konva_1.Group, null,

dist/components/react_canvas/line_annotation.js

@@ -44,3 +44,3 @@ "use strict";
             var lines = _this.props.lines;
-            return (react_1.default.createElement(react_konva_1.Group, null, lines.map(_this.renderAnnotationLine)));
+            return react_1.default.createElement(react_konva_1.Group, null, lines.map(_this.renderAnnotationLine));
         };
@@ -47,0 +47,0 @@ return _this;

dist/components/react_canvas/line_geometries.js

@@ -84,3 +84,3 @@ "use strict";
                     linePointsElements.push(react_1.default.createElement(react_konva_1.Group, { key: "line-point-group-" + lineIndex + "-" + pointIndex, x: transform.x },
-                        react_1.default.createElement(renderprops_konva_cjs_1.Spring, { native: true, from: { y: y }, to: { y: y } }, function (props) {
+                        react_1.default.createElement(renderprops_konva_cjs_1.Spring, { native: true, from: { y: y }, to: { y: y } }, function () {
                             var pointProps = rendering_props_utils_1.buildLinePointProps({
@@ -125,3 +125,3 @@ lineIndex: lineIndex,
                     lineElements.push(react_1.default.createElement(react_konva_1.Group, { key: index, x: transform.x },
-                        react_1.default.createElement(renderprops_konva_cjs_1.Spring, { native: true, reset: true, from: { opacity: 0 }, to: { opacity: 1 } }, function (props) {
+                        react_1.default.createElement(renderprops_konva_cjs_1.Spring, { native: true, reset: true, from: { opacity: 0 }, to: { opacity: 1 } }, function () {
                             var lineProps = rendering_props_utils_1.buildLineProps({
@@ -128,0 +128,0 @@ index: index,

dist/components/react_canvas/reactive_chart.js

@@ -106,7 +106,9 @@ "use strict";
             var highlightedLegendItem = _this.getHighlightedLegendItem();
-            var element = react_1.default.createElement(bar_geometries_1.BarGeometries, { key: 'bar-geometries', animated: canDataBeAnimated, bars: geometries.bars, style: chartTheme.barSeriesStyle, sharedStyle: chartTheme.sharedStyle, highlightedLegendItem: highlightedLegendItem });
-            return [{
+            var element = (react_1.default.createElement(bar_geometries_1.BarGeometries, { key: 'bar-geometries', animated: canDataBeAnimated, bars: geometries.bars, style: chartTheme.barSeriesStyle, sharedStyle: chartTheme.sharedStyle, highlightedLegendItem: highlightedLegendItem }));
+            return [
+                {
                     element: element,
                     zIndex: 0,
-                }];
+                },
+            ];
         };
@@ -119,7 +121,9 @@ _this.renderLineSeries = function () {
             var highlightedLegendItem = _this.getHighlightedLegendItem();
-            var element = react_1.default.createElement(line_geometries_1.LineGeometries, { key: 'line-geometries', animated: canDataBeAnimated, lines: geometries.lines, style: chartTheme.lineSeriesStyle, sharedStyle: chartTheme.sharedStyle, highlightedLegendItem: highlightedLegendItem });
-            return [{
+            var element = (react_1.default.createElement(line_geometries_1.LineGeometries, { key: 'line-geometries', animated: canDataBeAnimated, lines: geometries.lines, style: chartTheme.lineSeriesStyle, sharedStyle: chartTheme.sharedStyle, highlightedLegendItem: highlightedLegendItem }));
+            return [
+                {
                     element: element,
                     zIndex: 0,
-                }];
+                },
+            ];
         };
@@ -132,7 +136,9 @@ _this.renderAreaSeries = function () {
             var highlightedLegendItem = _this.getHighlightedLegendItem();
-            var element = react_1.default.createElement(area_geometries_1.AreaGeometries, { key: 'area-geometries', animated: canDataBeAnimated, areas: geometries.areas, style: chartTheme.areaSeriesStyle, sharedStyle: chartTheme.sharedStyle, highlightedLegendItem: highlightedLegendItem });
-            return [{
+            var element = (react_1.default.createElement(area_geometries_1.AreaGeometries, { key: 'area-geometries', animated: canDataBeAnimated, areas: geometries.areas, style: chartTheme.areaSeriesStyle, sharedStyle: chartTheme.sharedStyle, highlightedLegendItem: highlightedLegendItem }));
+            return [
+                {
                     element: element,
                     zIndex: 0,
-                }];
+                },
+            ];
         };
@@ -177,7 +183,7 @@ _this.renderAxes = function () {
                     var lineStyle = spec.style;
-                    element = react_1.default.createElement(line_annotation_1.LineAnnotation, { key: "annotation-" + id, chartDimensions: chartDimensions, debug: debug, lines: annotation, lineStyle: lineStyle });
+                    element = (react_1.default.createElement(line_annotation_1.LineAnnotation, { key: "annotation-" + id, chartDimensions: chartDimensions, debug: debug, lines: annotation, lineStyle: lineStyle }));
                 }
                 else if (specs_1.isRectAnnotation(spec)) {
                     var rectStyle = spec.style;
-                    element = react_1.default.createElement(rect_annotation_1.RectAnnotation, { key: "annotation-" + id, chartDimensions: chartDimensions, debug: debug, rects: annotation, rectStyle: rectStyle });
+                    element = (react_1.default.createElement(rect_annotation_1.RectAnnotation, { key: "annotation-" + id, chartDimensions: chartDimensions, debug: debug, rects: annotation, rectStyle: rectStyle }));
                 }
@@ -295,8 +301,4 @@ if (element) {
                 clipY: 0,
-                clipWidth: [90, -90].includes(chartRotation)
-                    ? chartDimensions.height
-                    : chartDimensions.width,
-                clipHeight: [90, -90].includes(chartRotation)
-                    ? chartDimensions.width
-                    : chartDimensions.height,
+                clipWidth: [90, -90].includes(chartRotation) ? chartDimensions.height : chartDimensions.width,
+                clipHeight: [90, -90].includes(chartRotation) ? chartDimensions.width : chartDimensions.height,
             };
@@ -303,0 +305,0 @@ var brushProps = {};

dist/components/react_canvas/rect_annotation.js

@@ -46,3 +46,3 @@ "use strict";
             var rects = _this.props.rects;
-            return (react_1.default.createElement(react_konva_1.Group, null, rects.map(_this.renderAnnotationRect)));
+            return react_1.default.createElement(react_konva_1.Group, null, rects.map(_this.renderAnnotationRect));
         };
@@ -49,0 +49,0 @@ return _this;

dist/components/react_canvas/utils/rendering_props_utils.js

@@ -65,4 +65,4 @@ "use strict";
     var displayValueY = displayValueDimensions.top;
-    var rotatedDisplayValueX = displayValueHeight > barWidth ?
-        x - Math.abs(barWidth - displayValueHeight) / 2
+    var rotatedDisplayValueX = displayValueHeight > barWidth
+        ? x - Math.abs(barWidth - displayValueHeight) / 2
         : x + Math.abs(barWidth - displayValueHeight) / 2;
@@ -80,5 +80,4 @@ switch (chartRotation) {
         case 90:
-            props.x = (barHeight >= displayValueWidth) ?
-                chartWidth - displayValueY - displayValueWidth
-                : chartWidth - displayValueY;
+            props.x =
+                barHeight >= displayValueWidth ? chartWidth - displayValueY - displayValueWidth : chartWidth - displayValueY;
             props.y = rotatedDisplayValueX;
@@ -95,3 +94,3 @@ props.verticalAlign = 'middle';
         case -90:
-            props.x = (barHeight >= displayValueWidth) ? displayValueY : displayValueY - displayValueWidth;
+            props.x = barHeight >= displayValueWidth ? displayValueY : displayValueY - displayValueWidth;
             props.y = chartHeight - rotatedDisplayValueX - displayValueHeight;
@@ -122,6 +121,6 @@ props.verticalAlign = 'middle';
     var chartWidth = chartDimensions.width;
-    var isOverflowX = valuePosition.x + clip.width - valuePosition.offsetX > chartWidth
-        || valuePosition.x + clip.offsetX - valuePosition.offsetX < 0;
-    var isOverflowY = valuePosition.y + clip.height - valuePosition.offsetY > chartHeight
-        || valuePosition.y + clip.offsetY - valuePosition.offsetY < 0;
+    var isOverflowX = valuePosition.x + clip.width - valuePosition.offsetX > chartWidth ||
+        valuePosition.x + clip.offsetX - valuePosition.offsetX < 0;
+    var isOverflowY = valuePosition.y + clip.height - valuePosition.offsetY > chartHeight ||
+        valuePosition.y + clip.offsetY - valuePosition.offsetY < 0;
     return !!hideClippedValue && (isOverflowX || isOverflowY);
@@ -137,4 +136,4 @@ }
     var displayValueY = barHeight >= displayValueHeight ? y : y - displayValueHeight;
-    var displayValueX = displayValueWidth > barWidth ?
-        x - Math.abs(barWidth - displayValueWidth) / 2
+    var displayValueX = displayValueWidth > barWidth
+        ? x - Math.abs(barWidth - displayValueWidth) / 2
         : x + Math.abs(barWidth - displayValueWidth) / 2;
@@ -141,0 +140,0 @@ var displayValueOffsetY = displayValueStyle.offsetY || 0;

dist/components/svg/axis.js

 "use strict";
-// import React, { SVGProps } from 'react';
-// import { AxisTick, AxisTicksDimensions, isHorizontal, isVertical } from '../../lib/axes/axis_utils';
-// import { AxisSpec, Position } from '../../lib/series/specs';
-// import { Theme } from '../../lib/themes/theme';
-// import { Dimensions } from '../../lib/utils/dimensions';
-// interface AxisProps {
-//   chartTheme: Theme;
-//   axisSpec: AxisSpec;
-//   axisTicksDimensions: AxisTicksDimensions;
-//   axisPosition: Dimensions;
-//   ticks: AxisTick[];
-// }
-// export class Axis extends React.PureComponent<AxisProps> {
-//   render() {
-//     return this.renderAxis();
-//   }
-//   renderTickLabel = (tick: AxisTick, i: number) => {
-//     const {
-//       axisSpec: { tickSize, tickPadding, position },
-//     } = this.props;
-//     const textProps: SVGProps<SVGTextElement> = {};
-//     if (isVertical(position)) {
-//       textProps.y = tick.position;
-//       textProps.textAnchor = position === 'left' ? 'end' : 'start';
-//       textProps.x = position === 'left' ? 0 : tickSize + tickPadding;
-//       textProps.dominantBaseline = 'middle';
-//     } else {
-//       textProps.y = position === 'top' ? 0 : tickSize + tickPadding;
-//       textProps.x = tick.position;
-//       textProps.textAnchor = 'middle';
-//       textProps.dominantBaseline = 'hanging';
-//     }
-//     // const transform = `translate(${textProps.x}, ${textProps.y})`;
-//     return (
-//       <text
-//         className="euiSeriesChartAxis_tickLabel"
-//         key={`tick-${i}`}
-//         {...textProps}
-//         // textAnchor={textProps.textAnchor}
-//         // dominantBaseline={textProps.dominantBaseline}
-//         // transform={transform}
-//       >
-//         {tick.label}
-//       </text>
-//     );
-//   }
-//   private renderTickLine = (tick: AxisTick, i: number) => {
-//     const {
-//       axisSpec: { tickSize, tickPadding, position },
-//       axisTicksDimensions: { maxLabelBboxHeight },
-//     } = this.props;
-//     const lineProps: SVGProps<SVGLineElement> = {};
-//     if (isVertical(position)) {
-//       lineProps.x1 = position === 'left' ? tickPadding : 0;
-//       lineProps.x2 = position === 'left' ? tickSize + tickPadding : tickSize;
-//       lineProps.y1 = tick.position;
-//       lineProps.y2 = tick.position;
-//     } else {
-//       lineProps.x1 = tick.position;
-//       lineProps.x2 = tick.position;
-//       lineProps.y1 = position === 'top' ? maxLabelBboxHeight + tickPadding : 0;
-//       lineProps.y2 = position === 'top' ? maxLabelBboxHeight + tickPadding + tickSize : tickSize;
-//     }
-//     return <line className="euiSeriesChartAxis_tickLine" key={`tick-${i}`} {...lineProps} />;
-//   }
-//   private renderAxis = () => {
-//     const { ticks, axisPosition } = this.props;
-//     const translation = `translate(${axisPosition.left} ${axisPosition.top})`;
-//     return (
-//       <g className="euiSeriesChartAxis" transform={translation}>
-//         <g className="euiSeriesChartAxis_lineGroup">{this.renderLine()}</g>
-//         <g className="euiSeriesChartAxis_ticksGroup">{ticks.map(this.renderTickLine)}</g>
-//         <g className="euiSeriesChartAxis_tickLabelsGroup">
-//           {ticks.filter((tick) => tick.label !== null).map(this.renderTickLabel)}
-//         </g>
-//         {this.renderAxisTitle()}
-//       </g>
-//     );
-//   }
-//   private renderLine = () => {
-//     const {
-//       axisSpec: { tickSize, tickPadding, position },
-//       axisPosition,
-//       axisTicksDimensions,
-//     } = this.props;
-//     const lineProps: SVGProps<SVGLineElement> = {};
-//     if (orientation === 'vertical') {
-//       lineProps.x1 = position === 'left' ? tickSize + tickPadding : 0;
-//       lineProps.x2 = position === 'left' ? tickSize + tickPadding : 0;
-//       lineProps.y1 = 0;
-//       lineProps.y2 = axisPosition.height;
-//     } else {
-//       lineProps.x1 = 0;
-//       lineProps.x2 = axisPosition.width;
-//       lineProps.y1 =
-//         position === 'top' ? axisTicksDimensions.maxLabelBboxHeight + tickSize + tickPadding : 0;
-//       lineProps.y2 =
-//         position === 'top' ? axisTicksDimensions.maxLabelBboxHeight + tickSize + tickPadding : 0;
-//     }
-//     return <line className="euiSeriesChartAxis_line" {...lineProps} />;
-//   }
-//   private renderAxisTitle() {
-//     const {
-//       axisSpec: { title, position },
-//     } = this.props;
-//     if (!title) {
-//       return null;
-//     }
-//     if (isHorizontal(position)) {
-//       return this.renderHoriziontalAxisTitle();
-//     }
-//     return this.renderVerticalAxisTitle();
-//   }
-//   private renderVerticalAxisTitle() {
-//     const {
-//       axisPosition: { height },
-//       axisSpec: { title, position, tickSize, tickPadding },
-//       axisTicksDimensions: { maxLabelBboxWidth },
-//       chartTheme: { chartMargins },
-//     } = this.props;
-//     const top = height / 2;
-//     const left =
-//       position === Position.Left
-//         ? -(maxLabelBboxWidth + chartMargins.left / 2)
-//         : tickSize + tickPadding + maxLabelBboxWidth + +chartMargins.right / 2;
-//     const translate = `translate(${left} ${top}) rotate(-90)`;
-//     return (
-//       <g className="euiSeriesChartAxis_axisTitle">
-//         <text textAnchor="middle" dominantBaseline="middle" transform={translate}>
-//           {title}
-//         </text>
-//       </g>
-//     );
-//   }
-//   private renderHoriziontalAxisTitle() {
-//     const {
-//       axisPosition: { width },
-//       axisSpec: { title, position, tickSize, tickPadding },
-//       axisTicksDimensions: { maxLabelBboxHeight },
-//       chartTheme: { chartMargins },
-//     } = this.props;
-//     const top =
-//       position === Position.Top
-//         ? -chartMargins.top / 2
-//         : maxLabelBboxHeight + tickPadding + tickSize + chartMargins.bottom / 2;
-//     const left = width / 2;
-//     const translate = `translate(${left} ${top} )`;
-//     return (
-//       <g className="euiSeriesChartAxis_axisTitle">
-//         <text textAnchor="middle" dominantBaseline="middle" transform={translate}>
-//           {title}
-//         </text>
-//       </g>
-//     );
-//   }
-// }
+// TODO
 //# sourceMappingURL=axis.js.map

dist/components/svg/bar_series.js

 "use strict";
-// import React from 'react';
-// import { BarGeometry } from '../../lib/series/rendering';
-// interface BarSeriesDataProps {
-//   animated?: boolean;
-//   bars: BarGeometry[];
-// }
-// export class BarSeries extends React.PureComponent<BarSeriesDataProps> {
-//   static defaultProps: Partial<BarSeriesDataProps> = {
-//     animated: false,
-//   };
-//   render() {
-//     const { animated, bars } = this.props;
-//     if (animated) {
-//       return this.renderAnimatedBars(bars);
-//     } else {
-//       return this.renderBars(bars);
-//     }
-//   }
-//   private renderBars = (bars: BarGeometry[]) => {
-//     return bars.map(({ x, y, width, height, color }, index) => {
-//       return <rect key={`rect-${index}`} x={x} y={y} width={width} height={height} fill={color} />;
-//     });
-//   }
-//   private renderAnimatedBars = (geoms: BarGeometry[]) => {
-//     // tslint:disable-next-line:no-console
-//     console.warn('[EUISeriesChart] Missing bar animation on SVG renderer');
-//     return this.renderBars(geoms);
-//   }
-// }
+// TODO
 //# sourceMappingURL=bar_series.js.map

dist/components/svg/reactive_chart.js

 "use strict";
-// // import { toJS } from 'mobx';
-// import { inject, observer } from 'mobx-react';
-// import React from 'react';
-// // import { LineSeries } from '../components/line_series';
-// import { ChartStore } from '../../state/chart_state';
-// // import { DataSeriesType } from '../commons/series/specs';
-// // import { AreaSeries } from '../components/area_series';
-// import { Axis } from './axis';
-// import { BarSeries } from './bar_series';
-// // import { AreaSeriesGlyph } from '../utils/area_series_utils';
-// // import { BarSeriesGlyph } from '../utils/bar_series_utils';
-// // import { LineSeriesGlyph } from '../utils/line_series_utils';
-// interface ReactiveChartProps {
-//   chartStore?: ChartStore; // FIX until we find a better way on ts mobx
-// }
-// // interface BarSeriesDataGlyphs {
-// //   type: DataSeriesType;
-// //   bars: BarSeriesGlyph[];
-// // }
-// // interface LineSeriesDataGlyphs {
-// //   type: DataSeriesType;
-// //   line: LineSeriesGlyph;
-// // }
-// // interface AreaSeriesDataGlyphs {
-// //   type: DataSeriesType;
-// //   area: AreaSeriesGlyph;
-// // }
-// class Chart extends React.Component<ReactiveChartProps> {
-//   static displayName = 'ReactiveChart';
-//   componentDidMount() {
-//     // tslint:disable-next-line:no-console
-//     console.log('Chart mounted');
-//   }
-//   componentWillUnmount() {
-//     // tslint:disable-next-line:no-console
-//     console.log('Chart unmounted');
-//   }
-//   renderAxes = () => {
-//     const {
-//       axesVisibleTicks,
-//       axesSpecs,
-//       axesTicksDimensions,
-//       axesPositions,
-//       chartTheme,
-//     } = this.props.chartStore!;
-//     const axesComponents: JSX.Element[] = [];
-//     axesVisibleTicks.forEach((axisTicks, axisId) => {
-//       const axisSpec = axesSpecs.get(axisId);
-//       const axisTicksDimensions = axesTicksDimensions.get(axisId);
-//       const axisPosition = axesPositions.get(axisId);
-//       const ticks = axesVisibleTicks.get(axisId);
-//       if (!ticks || !axisSpec || !axisTicksDimensions || !axisPosition) {
-//         return;
-//       }
-//       axesComponents.push(
-//         <Axis
-//           key={`axis-${axisId}`}
-//           axisSpec={axisSpec}
-//           axisTicksDimensions={axisTicksDimensions}
-//           axisPosition={axisPosition}
-//           ticks={ticks}
-//           chartTheme={chartTheme}
-//         />,
-//       );
-//     });
-//     return axesComponents;
-//   }
-//   // public renderLineSeries = () => {
-//   //   const { seriesGlyphs } = this.props.chartStore!;
-//   //   const points: JSX.Element[] = [];
-//   //   seriesGlyphs.forEach((spec, specId) => {
-//   //     if (spec.type !== DataSeriesType.Line) {
-//   //       return;
-//   //     }
-//   //     const lineGlyph = spec as LineSeriesDataGlyphs;
-//   //     points.push(<LineSeries key={`line-series-${specId}`} line={lineGlyph.line} />);
-//   //   });
-//   //   return points;
-//   // }
-//   // public renderPointSeries = () => {
-//   //   return null;
-//   // }
-//   renderBarSeries = () => {
-//     const { geometries, canDataBeAnimated } = this.props.chartStore!;
-//     if (!geometries) {
-//       return;
-//     }
-//     return <BarSeries key="data bars" animated={canDataBeAnimated} bars={geometries.bars} />;
-//   }
-//   // public renderAreaSeries = () => {
-//   //   const { seriesGlyphs } = this.props.chartStore!;
-//   //   const points: JSX.Element[] = [];
-//   //   seriesGlyphs.forEach((spec, specId) => {
-//   //     if (spec.type !== DataSeriesType.Area) {
-//   //       return;
-//   //     }
-//   //     const areaGlyph = spec as AreaSeriesDataGlyphs;
-//   //     // tslint:disable-next-line:no-console
-//   //     console.log('areaGlyph', areaGlyph);
-//   //     points.push(<AreaSeries key={`area-series-${specId}`} area={areaGlyph.area} />);
-//   //   });
-//   //   return points;
-//   // }
-//   render() {
-//     const { initialized } = this.props.chartStore!;
-//     if (!initialized.get()) {
-//       return null;
-//     }
-//     const { parentDimensions, chartDimensions, chartRotation } = this.props.chartStore!;
-//     // console.log({ lineSeriesSpecs: toJS(lineSeriesSpecs)})
-//     // console.log({ groupDomains: toJS(groupDomains)})
-//     // console.log({ vLeftAxisSpec: toJS(vLeftAxisSpec)})
-//     // console.log({ hBottomAxisSpec: toJS(hBottomAxisSpec)})
-//     // console.log({ chartDimensions});
-//     let chartTransform = '';
-//     if (chartRotation === 90) {
-//       chartTransform = `translate(${chartDimensions.width} 0) rotate(90)`;
-//     } else if (chartRotation === -90) {
-//       chartTransform = `translate(0 ${chartDimensions.height}) rotate(-90)`;
-//     }
-//     return (
-//       <div
-//         style={{
-//           position: 'absolute',
-//           top: 0,
-//           bottom: 0,
-//           right: 0,
-//           left: 0,
-//           // width: '100%',
-//           // height: '100%',
-//           // background: 'lightblue',
-//           // border: '10px solid blue',
-//           boxSizing: 'border-box',
-//         }}
-//       >
-//         <svg
-//           width={parentDimensions.width}
-//           height={parentDimensions.height}
-//           style={{
-//             width: '100%',
-//             height: '100%',
-//           }}
-//         >
-//           {/* <defs>
-//             <clipPath id="chart-bbox" clipPathUnits="objectBoundingBox">
-//               <rect
-//                 x={chartDimensions.left}
-//                 y={chartDimensions.top}
-//                 width={chartDimensions.width + chartDimensions.left}
-//                 height={chartDimensions.height}
-//               />
-//             </clipPath>
-//           </defs> */}
-//           <g
-//             className="euiSeriesChartChart_group"
-//             transform={`translate(${chartDimensions.left} ${chartDimensions.top})`}
-//           >
-//             {/* <rect
-//               x={0}
-//               y={0}
-//               width={chartDimensions.width}
-//               height={chartDimensions.height}
-//               fill="red"
-//               fillOpacity={0.3}
-//             /> */}
-//             {/* <g className="euiSeriesChartSeries_lineSeries">{this.renderLineSeries()}</g>
-//             <g className="euiSeriesChartSeries_pointSeries">{this.renderPointSeries()}</g> */}
-//             <g className="euiSeriesChartSeries_barSeries" transform={chartTransform}>
-//               {this.renderBarSeries()}
-//             </g>
-//             {/* <g className="euiSeriesChartSeries_areaSeries">{this.renderAreaSeries()}</g> */}
-//           </g>
-//           <g className="euiSeriesChartAxis_group">{this.renderAxes()}</g>
-//         </svg>
-//       </div>
-//     );
-//   }
-// }
-// export const ReactiveChart = inject('chartStore')(observer(Chart));
+// TODO
 //# sourceMappingURL=reactive_chart.js.map

dist/components/tooltips.js

@@ -45,2 +45,3 @@ "use strict";
                         var classes = classnames_1.default({
+                            /* eslint @typescript-eslint/camelcase:0 */
                             echTooltip__rowHighlighted: isHighlighted,
@@ -47,0 +48,0 @@ });

dist/lib/axes/axis_utils.js

@@ -155,3 +155,3 @@ "use strict";
     return {
-        x: (tickPosition - maxLabelBboxWidth / 2),
+        x: tickPosition - maxLabelBboxWidth / 2,
         y: isAxisTop ? 0 : tickSize + tickPadding,
@@ -257,5 +257,3 @@ align: align,
     var maxLabelBboxHeight = axisDim.maxLabelBboxHeight, maxLabelBboxWidth = axisDim.maxLabelBboxWidth;
-    var requiredSpace = isVertical(axisSpec.position)
-        ? maxLabelBboxHeight / 2
-        : maxLabelBboxWidth / 2;
+    var requiredSpace = isVertical(axisSpec.position) ? maxLabelBboxHeight / 2 : maxLabelBboxWidth / 2;
     var previousOccupiedSpace = 0;
@@ -300,9 +298,7 @@ var visibleTicks = [];
         if (position === specs_1.Position.Left) {
-            leftIncrement =
-                maxLabelBboxWidth + tickSize + tickPadding + chartMargins.left + axisTitleHeight;
+            leftIncrement = maxLabelBboxWidth + tickSize + tickPadding + chartMargins.left + axisTitleHeight;
             dimensions.left = maxLabelBboxWidth + cumLeftSum + chartMargins.left + axisTitleHeight;
         }
         else {
-            rightIncrement =
-                maxLabelBboxWidth + tickSize + tickPadding + chartMargins.right + axisTitleHeight;
+            rightIncrement = maxLabelBboxWidth + tickSize + tickPadding + chartMargins.right + axisTitleHeight;
             dimensions.left = left + width + cumRightSum;
@@ -314,9 +310,7 @@ }
         if (position === specs_1.Position.Top) {
-            topIncrement =
-                maxLabelBboxHeight + tickSize + tickPadding + chartMargins.top + axisTitleHeight;
+            topIncrement = maxLabelBboxHeight + tickSize + tickPadding + chartMargins.top + axisTitleHeight;
             dimensions.top = cumTopSum + chartMargins.top + axisTitleHeight;
         }
         else {
-            bottomIncrement =
-                maxLabelBboxHeight + tickSize + tickPadding + chartMargins.bottom + axisTitleHeight;
+            bottomIncrement = maxLabelBboxHeight + tickSize + tickPadding + chartMargins.bottom + axisTitleHeight;
             dimensions.top = top + height + cumBottomSum;
@@ -323,0 +317,0 @@ }

dist/lib/series/domains/x_domain.d.ts

@@ -14,3 +14,3 @@ import { Domain } from '../../utils/domain';
  */
-export declare function mergeXDomain(specs: Array<Pick<BasicSeriesSpec, 'seriesType' | 'xScaleType'>>, xValues: Set<any>, xDomain?: DomainRange | Domain): XDomain;
+export declare function mergeXDomain(specs: Pick<BasicSeriesSpec, 'seriesType' | 'xScaleType'>[], xValues: Set<any>, xDomain?: DomainRange | Domain): XDomain;
 /**
@@ -31,3 +31,3 @@ * Find the minimum interval between xValues.
  */
-export declare function convertXScaleTypes(specs: Array<Pick<BasicSeriesSpec, 'seriesType' | 'xScaleType' | 'timeZone'>>): {
+export declare function convertXScaleTypes(specs: Pick<BasicSeriesSpec, 'seriesType' | 'xScaleType' | 'timeZone'>[]): {
     scaleType: ScaleType;
@@ -34,0 +34,0 @@ isBandScale: boolean;

dist/lib/series/domains/y_domain.d.ts

@@ -0,6 +1,6 @@
+import { BasicSeriesSpec, DomainRange } from '../specs';
 import { GroupId, SpecId } from '../../utils/ids';
 import { ScaleContinuousType } from '../../utils/scales/scales';
+import { BaseDomain } from './domain';
 import { RawDataSeries } from '../series';
-import { BasicSeriesSpec, DomainRange } from '../specs';
-import { BaseDomain } from './domain';
 export declare type YDomain = BaseDomain & {
@@ -29,2 +29,2 @@ type: 'yDomain';
  */
-export declare function coerceYScaleTypes(specs: Array<Pick<BasicSeriesSpec, 'yScaleType'>>): ScaleContinuousType;
+export declare function coerceYScaleTypes(specs: Pick<BasicSeriesSpec, 'yScaleType'>[]): ScaleContinuousType;

dist/lib/series/domains/y_domain.js

@@ -33,6 +33,6 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var d3_array_1 = require("d3-array");
 var axis_utils_1 = require("../../axes/axis_utils");
+var domain_1 = require("../../utils/domain");
 var commons_1 = require("../../utils/commons");
-var domain_1 = require("../../utils/domain");
+var d3_array_1 = require("d3-array");
 function mergeYDomain(dataSeries, specs, domainsByGroupId) {
@@ -39,0 +39,0 @@ // group specs by group ids

dist/lib/series/legend.js

@@ -14,5 +14,3 @@ "use strict";
         var label = getSeriesColorLabel(series.colorValues, hasSingleSeries, spec);
-        var isSeriesVisible = deselectedDataSeries
-            ? series_1.findDataSeriesByColorValues(deselectedDataSeries, series) < 0
-            : true;
+        var isSeriesVisible = deselectedDataSeries ? series_1.findDataSeriesByColorValues(deselectedDataSeries, series) < 0 : true;
         if (!label || !spec) {
@@ -19,0 +17,0 @@ return;

dist/lib/series/rendering.js

@@ -163,14 +163,8 @@ "use strict";
             : formattedDisplayValue;
-        var computedDisplayValueWidth = bboxCalculator
-            .compute(displayValueText || '', fontSize, fontFamily)
-            .getOrElse({
+        var computedDisplayValueWidth = bboxCalculator.compute(displayValueText || '', fontSize, fontFamily).getOrElse({
             width: 0,
             height: 0,
         }).width;
-        var displayValueWidth = displayValueSettings && displayValueSettings.isValueContainedInElement
-            ? width
-            : computedDisplayValueWidth;
-        var hideClippedValue = displayValueSettings
-            ? displayValueSettings.hideClippedValue
-            : undefined;
+        var displayValueWidth = displayValueSettings && displayValueSettings.isValueContainedInElement ? width : computedDisplayValueWidth;
+        var hideClippedValue = displayValueSettings ? displayValueSettings.hideClippedValue : undefined;
         var displayValue = displayValueSettings && displayValueSettings.showValueLabel
@@ -325,5 +319,5 @@ ? {
     var width = indexedGeometry.width, height = indexedGeometry.height;
-    return (yCoordinate >= y && yCoordinate <= y + height && xCoordinate >= x && xCoordinate <= x + width);
+    return yCoordinate >= y && yCoordinate <= y + height && xCoordinate >= x && xCoordinate <= x + width;
 }
 exports.isPointOnGeometry = isPointOnGeometry;
 //# sourceMappingURL=rendering.js.map

dist/lib/series/utils/test_dataset.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BARCHART_1Y0G = [{ x: 0, y: 1 }, { x: 1, y: 2 }, { x: 2, y: 10 }, { x: 3, y: 6 }];
-exports.BARCHART_1Y0G_LINEAR = [
-    { x: 0, y: 1 },
-    { x: 1, y: 2 },
-    { x: 2.5, y: 10 },
-    { x: 3.5, y: 6 },
-];
+exports.BARCHART_1Y0G_LINEAR = [{ x: 0, y: 1 }, { x: 1, y: 2 }, { x: 2.5, y: 10 }, { x: 3.5, y: 6 }];
 exports.BARCHART_1Y1G = [
@@ -11,0 +6,0 @@ { x: 0, g: 'a', y: 1 },

dist/lib/utils/dimensions.js

@@ -33,16 +33,12 @@ "use strict";
             case specs_1.Position.Top:
-                hTopAxisSpecHeight +=
-                    maxLabelBboxHeight + tickSize + tickPadding + chartMargins.top + titleHeight;
+                hTopAxisSpecHeight += maxLabelBboxHeight + tickSize + tickPadding + chartMargins.top + titleHeight;
                 break;
             case specs_1.Position.Bottom:
-                hBottomAxisSpecHeight +=
-                    maxLabelBboxHeight + tickSize + tickPadding + chartMargins.bottom + titleHeight;
+                hBottomAxisSpecHeight += maxLabelBboxHeight + tickSize + tickPadding + chartMargins.bottom + titleHeight;
                 break;
             case specs_1.Position.Left:
-                vLeftAxisSpecWidth +=
-                    maxLabelBboxWidth + tickSize + tickPadding + chartMargins.left + titleHeight;
+                vLeftAxisSpecWidth += maxLabelBboxWidth + tickSize + tickPadding + chartMargins.left + titleHeight;
                 break;
             case specs_1.Position.Right:
-                vRightAxisSpecWidth +=
-                    maxLabelBboxWidth + tickSize + tickPadding + chartMargins.right + titleHeight;
+                vRightAxisSpecWidth += maxLabelBboxWidth + tickSize + tickPadding + chartMargins.right + titleHeight;
                 break;
@@ -49,0 +45,0 @@ }

dist/lib/utils/ids.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint @typescript-eslint/no-empty-interface: off */
 var newtype_ts_1 = require("newtype-ts");
@@ -4,0 +5,0 @@ var groupIdIso = newtype_ts_1.iso();

dist/lib/utils/scales/scale_band.d.ts

 import { ScaleQuantize } from 'd3-scale';
-import { ScaleType } from './scales';
-import { Scale } from './scales';
+import { ScaleType, Scale } from './scales';
 export declare class ScaleBand implements Scale {
@@ -5,0 +4,0 @@ readonly bandwidth: number;

dist/lib/utils/scales/scale_continuous.d.ts

@@ -1,3 +0,2 @@
-import { ScaleContinuousType, ScaleType } from './scales';
-import { Scale } from './scales';
+import { ScaleContinuousType, ScaleType, Scale } from './scales';
 export declare function limitToMin(value: number, positive: boolean): number;
@@ -4,0 +3,0 @@ /**

dist/lib/utils/scales/scale_continuous.js

@@ -141,5 +141,3 @@ "use strict";
                 var currentOffset = hasHourTicks_1 ? offset_1 : currentDateTime.offset;
-                return currentDateTime
-                    .minus({ minutes: currentOffset })
-                    .toMillis();
+                return currentDateTime.minus({ minutes: currentOffset }).toMillis();
             });
@@ -146,0 +144,0 @@ }

dist/state/annotation_utils.d.ts

@@ -63,7 +63,7 @@ /// <reference types="react" />
 }): AnnotationLineProps[];
-export declare function computeXDomainLineAnnotationDimensions(dataValues: LineAnnotationDatum[], xScale: Scale, chartRotation: Rotation, lineOverflow: number, axisPosition: Position, chartDimensions: Dimensions, lineColor: string, xScaleOffset: number, marker?: JSX.Element, markerDimensions?: {
+export declare function computeXDomainLineAnnotationDimensions(dataValues: LineAnnotationDatum[], xScale: Scale, chartRotation: Rotation, lineOverflow: number, axisPosition: Position, chartDimensions: Dimensions, lineColor: string, xScaleOffset: number, enableHistogramMode: boolean, marker?: JSX.Element, markerDimensions?: {
     width: number;
     height: number;
 }): AnnotationLineProps[];
-export declare function computeLineAnnotationDimensions(annotationSpec: LineAnnotationSpec, chartDimensions: Dimensions, chartRotation: Rotation, yScales: Map<GroupId, Scale>, xScale: Scale, axisPosition: Position, xScaleOffset: number): AnnotationLineProps[] | null;
+export declare function computeLineAnnotationDimensions(annotationSpec: LineAnnotationSpec, chartDimensions: Dimensions, chartRotation: Rotation, yScales: Map<GroupId, Scale>, xScale: Scale, axisPosition: Position, xScaleOffset: number, enableHistogramMode: boolean): AnnotationLineProps[] | null;
 /**
@@ -70,0 +70,0 @@ * Used when we need to snap values to the nearest tick edge, this performs a binary search for the nearest tick

dist/state/annotation_utils.js

@@ -65,10 +65,12 @@ "use strict";
         // Without overflow applied
-        var baseLinePosition = isHorizontalChartRotation ?
-            [0, yDomainPosition, chartWidth, yDomainPosition]
+        var baseLinePosition = isHorizontalChartRotation
+            ? [0, yDomainPosition, chartWidth, yDomainPosition]
             : [yDomainPosition, 0, yDomainPosition, chartHeight];
-        var linePosition = isHorizontalChartRotation ?
-            (axisPosition === specs_1.Position.Left) ? leftHorizontalAxis : rightHorizontaAxis
+        var linePosition = isHorizontalChartRotation
+            ? axisPosition === specs_1.Position.Left
+                ? leftHorizontalAxis
+                : rightHorizontaAxis
             : [0, yDomainPosition, chartHeight + lineOverflow, yDomainPosition];
-        var markerPosition = isHorizontalChartRotation ?
-            __spread(linePosition)
+        var markerPosition = isHorizontalChartRotation
+            ? __spread(linePosition)
             : [yDomainPosition, 0, yDomainPosition, chartHeight + lineOverflow];
@@ -95,4 +97,4 @@ if (isHorizontalChartRotation) {
         var markerTransform = getAnnotationLineTooltipTransform(chartRotation, markerPosition, axisPosition);
-        var annotationMarker = marker ?
-            { icon: marker, transform: markerTransform, color: lineColor, dimensions: markerOffsets }
+        var annotationMarker = marker
+            ? { icon: marker, transform: markerTransform, color: lineColor, dimensions: markerOffsets }
             : undefined;
@@ -110,3 +112,3 @@ var lineProp = {
 exports.computeYDomainLineAnnotationDimensions = computeYDomainLineAnnotationDimensions;
-function computeXDomainLineAnnotationDimensions(dataValues, xScale, chartRotation, lineOverflow, axisPosition, chartDimensions, lineColor, xScaleOffset, marker, markerDimensions) {
+function computeXDomainLineAnnotationDimensions(dataValues, xScale, chartRotation, lineOverflow, axisPosition, chartDimensions, lineColor, xScaleOffset, enableHistogramMode, marker, markerDimensions) {
     var chartHeight = chartDimensions.height;
@@ -116,2 +118,3 @@ var chartWidth = chartDimensions.width;
     var lineProps = [];
+    var alignWithTick = xScale.bandwidth > 0 && !enableHistogramMode;
     dataValues.forEach(function (datum) {
@@ -124,14 +127,6 @@ var dataValue = datum.dataValue;
         var offset = xScale.bandwidth / 2 - xScaleOffset;
-        var isContinuous = xScale.type !== "ordinal" /* Ordinal */;
-        var scaledXValue = xScale.scale(dataValue);
-        // d3.scale will return 0 for '', rendering the line incorrectly at 0
-        if (isNaN(scaledXValue) || (isContinuous && dataValue === '')) {
+        var scaledXValue = scaleAndValidateDatum(dataValue, xScale, alignWithTick);
+        if (scaledXValue == null) {
             return;
         }
-        if (isContinuous) {
-            var _a = __read(xScale.domain, 2), domainStart = _a[0], domainEnd = _a[1];
-            if (domainStart > dataValue || domainEnd < dataValue) {
-                return;
-            }
-        }
         var xDomainPosition = scaledXValue + offset;
@@ -143,9 +138,8 @@ var linePosition = [0, 0, 0, 0];
             case 0: {
-                var startY = (axisPosition === specs_1.Position.Bottom) ? 0 : -lineOverflow;
-                var endY = (axisPosition === specs_1.Position.Bottom) ? chartHeight + lineOverflow : chartHeight;
+                var startY = axisPosition === specs_1.Position.Bottom ? 0 : -lineOverflow;
+                var endY = axisPosition === specs_1.Position.Bottom ? chartHeight + lineOverflow : chartHeight;
                 linePosition = [xDomainPosition, startY, xDomainPosition, endY];
                 tooltipLinePosition = [xDomainPosition, 0, xDomainPosition, chartHeight];
-                var startMarkerY = (axisPosition === specs_1.Position.Bottom) ? 0 : -lineOverflow - markerOffsets.height;
-                var endMarkerY = (axisPosition === specs_1.Position.Bottom) ?
-                    chartHeight + lineOverflow + markerOffsets.height : chartHeight;
+                var startMarkerY = axisPosition === specs_1.Position.Bottom ? 0 : -lineOverflow - markerOffsets.height;
+                var endMarkerY = axisPosition === specs_1.Position.Bottom ? chartHeight + lineOverflow + markerOffsets.height : chartHeight;
                 markerPosition = [xDomainPosition, startMarkerY, xDomainPosition, endMarkerY];
@@ -169,9 +163,8 @@ break;
             case 180: {
-                var startY = (axisPosition === specs_1.Position.Bottom) ? 0 : -lineOverflow;
-                var endY = (axisPosition === specs_1.Position.Bottom) ? chartHeight + lineOverflow : chartHeight;
+                var startY = axisPosition === specs_1.Position.Bottom ? 0 : -lineOverflow;
+                var endY = axisPosition === specs_1.Position.Bottom ? chartHeight + lineOverflow : chartHeight;
                 linePosition = [xDomainPosition, startY, xDomainPosition, endY];
                 tooltipLinePosition = [xDomainPosition, 0, xDomainPosition, chartHeight];
-                var startMarkerY = (axisPosition === specs_1.Position.Bottom) ? 0 : -lineOverflow - markerOffsets.height;
-                var endMarkerY = (axisPosition === specs_1.Position.Bottom) ?
-                    chartHeight + lineOverflow + markerOffsets.height : chartHeight;
+                var startMarkerY = axisPosition === specs_1.Position.Bottom ? 0 : -lineOverflow - markerOffsets.height;
+                var endMarkerY = axisPosition === specs_1.Position.Bottom ? chartHeight + lineOverflow + markerOffsets.height : chartHeight;
                 markerPosition = [chartWidth - xDomainPosition, startMarkerY, chartWidth - xDomainPosition, endMarkerY];
@@ -182,4 +175,4 @@ break;
         var markerTransform = getAnnotationLineTooltipTransform(chartRotation, markerPosition, axisPosition);
-        var annotationMarker = marker ?
-            { icon: marker, transform: markerTransform, color: lineColor, dimensions: markerOffsets }
+        var annotationMarker = marker
+            ? { icon: marker, transform: markerTransform, color: lineColor, dimensions: markerOffsets }
             : undefined;
@@ -192,3 +185,3 @@ var lineProp = { position: linePosition, details: details, marker: annotationMarker, tooltipLinePosition: tooltipLinePosition };
 exports.computeXDomainLineAnnotationDimensions = computeXDomainLineAnnotationDimensions;
-function computeLineAnnotationDimensions(annotationSpec, chartDimensions, chartRotation, yScales, xScale, axisPosition, xScaleOffset) {
+function computeLineAnnotationDimensions(annotationSpec, chartDimensions, chartRotation, yScales, xScale, axisPosition, xScaleOffset, enableHistogramMode) {
     var domainType = annotationSpec.domainType, dataValues = annotationSpec.dataValues, marker = annotationSpec.marker, markerDimensions = annotationSpec.markerDimensions, hideLines = annotationSpec.hideLines;
@@ -204,3 +197,3 @@ if (hideLines) {
     if (domainType === specs_1.AnnotationDomainTypes.XDomain) {
-        return computeXDomainLineAnnotationDimensions(dataValues, xScale, chartRotation, lineOverflow, axisPosition, chartDimensions, lineColor, xScaleOffset, marker, markerDimensions);
+        return computeXDomainLineAnnotationDimensions(dataValues, xScale, chartRotation, lineOverflow, axisPosition, chartDimensions, lineColor, xScaleOffset, enableHistogramMode, marker, markerDimensions);
     }
@@ -245,4 +238,3 @@ var groupId = annotationSpec.groupId;
     var isContinuous = scale.type !== "ordinal" /* Ordinal */;
-    var value = (isContinuous && alignWithTick) ?
-        getNearestTick(dataValue, scale.ticks(), scale.minInterval) : dataValue;
+    var value = isContinuous && alignWithTick ? getNearestTick(dataValue, scale.ticks(), scale.minInterval) : dataValue;
     var scaledValue = scale.scale(value);
@@ -353,3 +345,3 @@ // d3.scale will return 0 for '', rendering the line incorrectly at 0
     var annotationDimensions = new Map();
-    var barsShift = totalBarsInCluster * xScale.bandwidth / 2;
+    var barsShift = (totalBarsInCluster * xScale.bandwidth) / 2;
     var band = xScale.bandwidth / (1 - xScale.barsPadding);
@@ -368,3 +360,3 @@ var halfPadding = (band - xScale.bandwidth) / 2;
             }
-            var dimensions = computeLineAnnotationDimensions(annotationSpec, chartDimensions, chartRotation, yScales, xScale, annotationAxisPosition, xScaleOffset - clusterOffset);
+            var dimensions = computeLineAnnotationDimensions(annotationSpec, chartDimensions, chartRotation, yScales, xScale, annotationAxisPosition, xScaleOffset - clusterOffset, enableHistogramMode);
             if (dimensions) {
@@ -394,15 +386,15 @@ annotationDimensions.set(annotationId, dimensions);
     if (isXDomainAnnotation) {
-        isCursorWithinXBounds = isHorizontalChartRotation ?
-            cursorPosition.x >= startX - offset && cursorPosition.x <= endX + offset
+        isCursorWithinXBounds = isHorizontalChartRotation
+            ? cursorPosition.x >= startX - offset && cursorPosition.x <= endX + offset
             : cursorPosition.x >= chartHeight - startX - offset && cursorPosition.x <= chartHeight - endX + offset;
-        isCursorWithinYBounds = isHorizontalChartRotation ?
-            cursorPosition.y >= startY && cursorPosition.y <= endY
+        isCursorWithinYBounds = isHorizontalChartRotation
+            ? cursorPosition.y >= startY && cursorPosition.y <= endY
             : cursorPosition.y >= startY - offset && cursorPosition.y <= endY + offset;
     }
     else {
-        isCursorWithinXBounds = isHorizontalChartRotation ?
-            cursorPosition.x >= startX && cursorPosition.x <= endX
+        isCursorWithinXBounds = isHorizontalChartRotation
+            ? cursorPosition.x >= startX && cursorPosition.x <= endX
             : cursorPosition.x >= startX - offset && cursorPosition.x <= endX + offset;
-        isCursorWithinYBounds = isHorizontalChartRotation ?
-            cursorPosition.y >= startY - offset && cursorPosition.y <= endY + offset
+        isCursorWithinYBounds = isHorizontalChartRotation
+            ? cursorPosition.y >= startY - offset && cursorPosition.y <= endY + offset
             : cursorPosition.y >= chartWidth - startY - offset && cursorPosition.y <= chartWidth - endY + offset;
@@ -425,29 +417,33 @@ }
     if (isXDomainAnnotation) {
-        var bottomAxisYBounds = chartRotation === 0 ?
-            cursorPosition.y <= endY + markerHeight && cursorPosition.y >= endY
+        var bottomAxisYBounds = chartRotation === 0
+            ? cursorPosition.y <= endY + markerHeight && cursorPosition.y >= endY
             : cursorPosition.y >= startY - markerHeight && cursorPosition.y <= startY;
-        var topAxisYBounds = chartRotation === 0 ?
-            cursorPosition.y >= startY - markerHeight && cursorPosition.y <= startY
+        var topAxisYBounds = chartRotation === 0
+            ? cursorPosition.y >= startY - markerHeight && cursorPosition.y <= startY
             : cursorPosition.y <= endY + markerHeight && cursorPosition.y >= endY;
-        isCursorWithinMarkerXBounds = isHorizontalChartRotation ?
-            cursorPosition.x <= endX + markerWidthOffset && cursorPosition.x >= startX - markerWidthOffset
+        isCursorWithinMarkerXBounds = isHorizontalChartRotation
+            ? cursorPosition.x <= endX + markerWidthOffset && cursorPosition.x >= startX - markerWidthOffset
             : cursorPosition.x >= startX - markerWidthOffset && cursorPosition.x <= startX + markerWidthOffset;
-        isCursorWithinMarkerYBounds = isHorizontalChartRotation ?
-            (axisPosition === specs_1.Position.Top ? topAxisYBounds : bottomAxisYBounds)
+        isCursorWithinMarkerYBounds = isHorizontalChartRotation
+            ? axisPosition === specs_1.Position.Top
+                ? topAxisYBounds
+                : bottomAxisYBounds
             : cursorPosition.y >= startY - markerHeightOffset && cursorPosition.y <= endY + markerHeightOffset;
     }
     else {
-        var leftAxisXBounds = chartRotation === 0 ?
-            cursorPosition.x >= startX - markerWidth && cursorPosition.x <= startX
+        var leftAxisXBounds = chartRotation === 0
+            ? cursorPosition.x >= startX - markerWidth && cursorPosition.x <= startX
             : cursorPosition.x <= endX + markerWidth && cursorPosition.x >= endX;
-        var rightAxisXBounds = chartRotation === 0 ?
-            cursorPosition.x <= endX + markerWidth && cursorPosition.x >= endX
+        var rightAxisXBounds = chartRotation === 0
+            ? cursorPosition.x <= endX + markerWidth && cursorPosition.x >= endX
             : cursorPosition.x >= startX - markerWidth && cursorPosition.x <= startX;
-        isCursorWithinMarkerXBounds = isHorizontalChartRotation ?
-            (axisPosition === specs_1.Position.Right ? rightAxisXBounds : leftAxisXBounds)
+        isCursorWithinMarkerXBounds = isHorizontalChartRotation
+            ? axisPosition === specs_1.Position.Right
+                ? rightAxisXBounds
+                : leftAxisXBounds
             : cursorPosition.x <= endX + offset + markerWidth && cursorPosition.x >= startX - offset - markerWidth;
-        isCursorWithinMarkerYBounds = isHorizontalChartRotation ?
-            cursorPosition.y >= startY - markerHeightOffset && cursorPosition.y <= endY + markerHeightOffset
-            : cursorPosition.y >= chartWidth - startY - markerHeightOffset
-                && cursorPosition.y <= chartWidth - endY + markerHeightOffset;
+        isCursorWithinMarkerYBounds = isHorizontalChartRotation
+            ? cursorPosition.y >= startY - markerHeightOffset && cursorPosition.y <= endY + markerHeightOffset
+            : cursorPosition.y >= chartWidth - startY - markerHeightOffset &&
+                cursorPosition.y <= chartWidth - endY + markerHeightOffset;
     }
@@ -492,4 +488,4 @@ return isCursorWithinMarkerXBounds && isCursorWithinMarkerYBounds;
     var _a = __read(linePosition, 4), startX = _a[0], startY = _a[1], endX = _a[2], endY = _a[3];
-    var xPosition = (axisPosition === specs_1.Position.Right) ? endX : startX;
-    var yPosition = (axisPosition === specs_1.Position.Top) ? startY : endY;
+    var xPosition = axisPosition === specs_1.Position.Right ? endX : startX;
+    var yPosition = axisPosition === specs_1.Position.Top ? startY : endY;
     var xOffset = getAnnotationLineTooltipXOffset(chartRotation, axisPosition);
@@ -541,11 +537,26 @@ var yOffset = getAnnotationLineTooltipYOffset(chartRotation, axisPosition);
             if (chartRotation === 180 && domainType === specs_1.AnnotationDomainTypes.YDomain) {
-                var flippedYDomainTooltipLinePosition = [tooltipStartX, chartHeight - tooltipStartY, tooltipEndX, chartHeight - tooltipEndY];
+                var flippedYDomainTooltipLinePosition = [
+                    tooltipStartX,
+                    chartHeight - tooltipStartY,
+                    tooltipEndX,
+                    chartHeight - tooltipEndY,
+                ];
                 annotationTooltipState.transform = getAnnotationLineTooltipTransform(chartRotation, flippedYDomainTooltipLinePosition, axisPosition);
             }
             if (chartRotation === 180 && domainType === specs_1.AnnotationDomainTypes.XDomain) {
-                var rotatedXDomainTooltipLinePosition = [chartWidth - tooltipStartX, tooltipStartY, chartWidth - tooltipEndX, tooltipEndY];
+                var rotatedXDomainTooltipLinePosition = [
+                    chartWidth - tooltipStartX,
+                    tooltipStartY,
+                    chartWidth - tooltipEndX,
+                    tooltipEndY,
+                ];
                 annotationTooltipState.transform = getAnnotationLineTooltipTransform(chartRotation, rotatedXDomainTooltipLinePosition, axisPosition);
             }
             if (chartRotation === 90 && domainType === specs_1.AnnotationDomainTypes.YDomain) {
-                var rotatedYDomainTooltipLinePosition = [chartWidth - tooltipStartX, tooltipStartY, chartWidth - tooltipEndX, tooltipEndY];
+                var rotatedYDomainTooltipLinePosition = [
+                    chartWidth - tooltipStartX,
+                    tooltipStartY,
+                    chartWidth - tooltipEndX,
+                    tooltipEndY,
+                ];
                 annotationTooltipState.transform = getAnnotationLineTooltipTransform(chartRotation, rotatedYDomainTooltipLinePosition, axisPosition);
@@ -571,5 +582,3 @@ }
     var xPosition = utils_1.isHorizontalRotation(chartRotation) ? cursorPosition.x : cursorPosition.y;
-    return chartRotation === -90 ?
-        xPosition > chartWidth / 2
-        : xPosition < chartWidth / 2;
+    return chartRotation === -90 ? xPosition > chartWidth / 2 : xPosition < chartWidth / 2;
 }
@@ -579,5 +588,3 @@ exports.isRightRectTooltip = isRightRectTooltip;
     var yPosition = utils_1.isHorizontalRotation(chartRotation) ? cursorPosition.y : cursorPosition.x;
-    return (chartRotation === 180) ?
-        yPosition > chartHeight / 2
-        : yPosition < chartHeight / 2;
+    return chartRotation === 180 ? yPosition > chartHeight / 2 : yPosition < chartHeight / 2;
 }
@@ -589,5 +596,3 @@ exports.isBottomRectTooltip = isBottomRectTooltip;
     var horizontalLeft = isRightTooltip ? endX : startX;
-    return isHorizontalChartRotation ?
-        (chartRotation === 180 ? chartWidth - horizontalLeft : horizontalLeft)
-        : cursorX;
+    return isHorizontalChartRotation ? (chartRotation === 180 ? chartWidth - horizontalLeft : horizontalLeft) : cursorX;
 }
@@ -599,14 +604,8 @@ exports.computeRectTooltipLeft = computeRectTooltipLeft;
     var verticalTop = isBottomTooltip ? endX : startX;
-    return isHorizontalChartRotation ?
-        cursorY
-        : (chartRotation === -90) ? chartHeight - verticalTop : verticalTop;
+    return isHorizontalChartRotation ? cursorY : chartRotation === -90 ? chartHeight - verticalTop : verticalTop;
 }
 exports.computeRectTooltipTop = computeRectTooltipTop;
 function computeRectTooltipOffset(isRightTooltip, isBottomTooltip, chartRotation) {
-    var offsetLeft = isRightTooltip ?
-        (chartRotation === 180 ? '-100%' : '0')
-        : (chartRotation === 180 ? '0' : '-100%');
-    var offsetTop = isBottomTooltip ?
-        (chartRotation === -90 ? '-100%' : '0')
-        : (chartRotation === -90 ? '0' : '-100%');
+    var offsetLeft = isRightTooltip ? (chartRotation === 180 ? '-100%' : '0') : chartRotation === 180 ? '0' : '-100%';
+    var offsetTop = isBottomTooltip ? (chartRotation === -90 ? '-100%' : '0') : chartRotation === -90 ? '0' : '-100%';
     return { offsetLeft: offsetLeft, offsetTop: offsetTop };
@@ -613,0 +612,0 @@ }

dist/state/chart_state.js

@@ -608,4 +608,5 @@ "use strict";
         var bboxCalculator = new canvas_text_bbox_calculator_1.CanvasTextBBoxCalculator();
-        var barsPadding = this.enableHistogramMode.get() ?
-            this.chartTheme.scales.histogramPadding : this.chartTheme.scales.barsPadding;
+        var barsPadding = this.enableHistogramMode.get()
+            ? this.chartTheme.scales.histogramPadding
+            : this.chartTheme.scales.barsPadding;
         this.axesTicksDimensions.clear();
@@ -612,0 +613,0 @@ this.axesSpecs.forEach(function (axisSpec) {

dist/state/utils.d.ts

@@ -83,3 +83,3 @@ import { XDomain } from '../lib/series/domains/x_domain';
  */
-export declare function mergeGeometriesIndexes(...iterables: Array<Map<any, IndexedGeometry[]>>): Map<any, IndexedGeometry[]>;
+export declare function mergeGeometriesIndexes(...iterables: Map<any, IndexedGeometry[]>[]): Map<any, IndexedGeometry[]>;
 export declare function isHorizontalRotation(chartRotation: Rotation): boolean;
@@ -86,0 +86,0 @@ export declare function isVerticalRotation(chartRotation: Rotation): boolean;

dist/state/utils.js

@@ -68,3 +68,3 @@ "use strict";
     var updatedCustomSeriesColors = new Map();
-    seriesSpecs.forEach(function (spec, id) {
+    seriesSpecs.forEach(function (spec) {
         if (spec.customSeriesColors) {
@@ -138,3 +138,3 @@ spec.customSeriesColors.forEach(function (color, seriesColorValues) {
     };
-    formattedDataSeries.stacked.forEach(function (dataSeriesGroup, index) {
+    formattedDataSeries.stacked.forEach(function (dataSeriesGroup) {
         var groupId = dataSeriesGroup.groupId, dataSeries = dataSeriesGroup.dataSeries, counts = dataSeriesGroup.counts;
@@ -160,3 +160,3 @@ var yScale = yScales.get(groupId);
     });
-    formattedDataSeries.nonStacked.map(function (dataSeriesGroup, index) {
+    formattedDataSeries.nonStacked.map(function (dataSeriesGroup) {
         var groupId = dataSeriesGroup.groupId, dataSeries = dataSeriesGroup.dataSeries;
@@ -253,3 +253,3 @@ var yScale = yScales.get(groupId);
     var halfPadding = (band - bandwidth) / 2;
-    var startAlignmentOffset = (bandwidth / 2) + halfPadding;
+    var startAlignmentOffset = bandwidth / 2 + halfPadding;
     switch (histogramModeAlignment) {
@@ -296,6 +296,8 @@ case specs_1.HistogramModeAlignments.Center:
             // the props building in the geometries component
-            var barSeriesStyle = spec.barSeriesStyle ? __assign({}, chartTheme.barSeriesStyle, spec.barSeriesStyle) : chartTheme.barSeriesStyle;
+            var barSeriesStyle = spec.barSeriesStyle
+                ? __assign({}, chartTheme.barSeriesStyle, spec.barSeriesStyle) : chartTheme.barSeriesStyle;
             var yAxis = getAxesSpecForSpecId(axesSpecs, spec.groupId).yAxis;
             var valueFormatter = yAxis && yAxis.tickFormat ? yAxis.tickFormat : commons_1.identity;
-            var displayValueSettings = spec.displayValueSettings ? __assign({ valueFormatter: valueFormatter }, spec.displayValueSettings) : undefined;
+            var displayValueSettings = spec.displayValueSettings
+                ? __assign({ valueFormatter: valueFormatter }, spec.displayValueSettings) : undefined;
             var renderedBars = rendering_1.renderBars(shift, ds.data, xScale, yScale, color, ds.specId, ds.key, displayValueSettings, barSeriesStyle);
@@ -302,0 +304,0 @@ barGeometriesIndex = mergeGeometriesIndexes(barGeometriesIndex, renderedBars.indexedGeometries);

package.json

 {
   "name": "@elastic/charts",
   "description": "Elastic-Charts data visualization library",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "author": "Marco Vettorello <[e-mail]>",
@@ -24,11 +24,6 @@ "license": "Apache-2.0",
     "storybook:build": "rm -rf .out && build-storybook -c .storybook -o .out",
-    "lint": "yarn typecheck:all && tslint -c ./tslint.yaml -p ./tsconfig.all.json",
+    "lint": "eslint --ext .tsx,.ts,.js src/ stories/ scripts/ .storybook/ .playground/",
     "lint:fix": "yarn lint --fix",
-    "prettier": "prettier --check --debug-check \"**/*.{ts,tsx}\"",
-    "prettier:fix": "prettier --write \"{,!(node_modules)/}**/*.{ts,tsx}\"",
     "test": "jest --config jest.config.json",
     "watch": "yarn test --watch",
-    "format:fix": "yarn prettier:fix && yarn lint:fix",
-    "format:check": "yarn prettier && yarn lint",
-    "style:fix": "yarn typecheck:src && yarn prettier-tslint fix \"{,!(node_modules)/}**/*.{ts,tsx}\"",
     "semantic-release": "semantic-release",
@@ -47,3 +42,3 @@ "typecheck:src": "yarn build:ts --noEmit",
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
-      "pre-commit": "yarn run lint && yarn run test"
+      "pre-commit": "yarn run typecheck:all && yarn run lint && yarn run test"
     }
@@ -86,2 +81,4 @@ },
     "@types/uuid": "^3.4.4",
+    "@typescript-eslint/eslint-plugin": "^1.9.0",
+    "@typescript-eslint/parser": "^1.9.0",
     "babel-loader": "^8.0.5",
@@ -95,2 +92,8 @@ "canvas": "^2.4.1",
     "enzyme-adapter-react-16": "^1.10.0",
+    "eslint": "^5.16.0",
+    "eslint-config-prettier": "^4.3.0",
+    "eslint-plugin-import": "^2.17.3",
+    "eslint-plugin-jest": "^22.6.4",
+    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-react": "^7.13.0",
     "husky": "^1.3.1",
@@ -101,3 +104,2 @@ "jest": "^24.1.0",
     "prettier": "1.16.4",
-    "prettier-tslint": "^0.4.2",
     "react-docgen-typescript-loader": "^3.0.1",
@@ -111,4 +113,2 @@ "react-docgen-typescript-webpack-plugin": "^1.1.0",
     "ts-loader": "^5.3.3",
-    "tslint": "^5.13.0",
-    "tslint-microsoft-contrib": "^6.0.0",
     "typescript": "^3.3.3333",
@@ -115,0 +115,0 @@ "webpack": "^4.29.5",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

1686735

decreased by-0.47%

Dev dependency count

67

increased by8.06%

Lines of code

16795

decreased by-2.28%

No dependency changes