@elastic/charts - npm Package Compare versions

Comparing version 5.2.0 to 6.0.0

CHANGELOG.md

@@ -0,1 +1,13 @@
+# [6.0.0](https://github.com/elastic/elastic-charts/compare/v5.2.0...v6.0.0) (2019-06-13)
+
+
+### Features
+
+* **tooltip:** add custom headerFormatter ([#233](https://github.com/elastic/elastic-charts/issues/233)) ([bd181b5](https://github.com/elastic/elastic-charts/commit/bd181b5))
+
+
+### BREAKING CHANGES
+
+* **tooltip:** Previously, you could define `tooltipType` and `tooltipSnap` props in a Settings component; this commit removes these from `SettingsSpecProps` and instead there is a single `tooltip` prop which can accept either a `TooltipType` or a full `TooltipProps` object which may include `type`, `snap`, and/or `headerFormattter` for formatting the header.
+
 # [5.2.0](https://github.com/elastic/elastic-charts/compare/v5.1.0...v5.2.0) (2019-06-12)
@@ -2,0 +14,0 @@

dist/components/tooltips.d.ts

 import React from 'react';
+import { TooltipValue, TooltipValueFormatter } from '../lib/utils/interactions';
 import { ChartStore } from '../state/chart_state';
@@ -8,2 +9,3 @@ interface TooltipProps {
     static displayName: string;
+    renderHeader(headerData?: TooltipValue, formatter?: TooltipValueFormatter): any;
     render(): JSX.Element;
@@ -10,0 +12,0 @@ }

dist/components/tooltips.js

@@ -27,4 +27,10 @@ "use strict";
     }
+    TooltipsComponent.prototype.renderHeader = function (headerData, formatter) {
+        if (!headerData) {
+            return null;
+        }
+        return formatter ? formatter(headerData) : headerData.value;
+    };
     TooltipsComponent.prototype.render = function () {
-        var _a = this.props.chartStore, isTooltipVisible = _a.isTooltipVisible, tooltipData = _a.tooltipData, tooltipPosition = _a.tooltipPosition;
+        var _a = this.props.chartStore, isTooltipVisible = _a.isTooltipVisible, tooltipData = _a.tooltipData, tooltipPosition = _a.tooltipPosition, tooltipHeaderFormatter = _a.tooltipHeaderFormatter;
         if (!isTooltipVisible.get()) {
@@ -34,3 +40,3 @@ return react_1.default.createElement("div", { className: "echTooltip echTooltip--hidden" });
         return (react_1.default.createElement("div", { className: "echTooltip", style: { transform: tooltipPosition.transform } },
-            react_1.default.createElement("p", { className: "echTooltip__header" }, tooltipData[0] && tooltipData[0].value),
+            react_1.default.createElement("div", { className: "echTooltip__header" }, this.renderHeader(tooltipData[0], tooltipHeaderFormatter)),
             react_1.default.createElement("div", { className: "echTooltip__table" },
@@ -37,0 +43,0 @@ react_1.default.createElement("table", null,

dist/index.d.ts

 export * from './specs';
 export { Chart } from './components/chart';
-export { TooltipType } from './lib/utils/interactions';
+export { TooltipType, TooltipValue, TooltipValueFormatter } from './lib/utils/interactions';
 export { getAxisId, getGroupId, getSpecId, getAnnotationId } from './lib/utils/ids';
@@ -5,0 +5,0 @@ export { ScaleType } from './lib/utils/scales/scales';

dist/lib/series/tooltip.js

@@ -41,4 +41,4 @@ "use strict";
 function emptyFormatter(value) {
-    return "" + value;
+    return value;
 }
 //# sourceMappingURL=tooltip.js.map

dist/lib/utils/interactions.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import { BarGeometry, IndexedGeometry, PointGeometry } from '../series/rendering';
@@ -23,2 +24,3 @@ import { Datum, Rotation } from '../series/specs';
 }
+export declare type TooltipValueFormatter = (data: TooltipValue) => JSX.Element | string;
 export interface HighlightedElement {
@@ -25,0 +27,0 @@ position: {

dist/specs/settings.d.ts

@@ -5,6 +5,11 @@ import { PureComponent } from 'react';
 import { Domain } from '../lib/utils/domain';
-import { TooltipType } from '../lib/utils/interactions';
+import { TooltipType, TooltipValueFormatter } from '../lib/utils/interactions';
 import { BrushEndListener, ChartStore, ElementClickListener, ElementOverListener, LegendItemListener } from '../state/chart_state';
 export declare const DEFAULT_TOOLTIP_TYPE = TooltipType.VerticalCursor;
 export declare const DEFAULT_TOOLTIP_SNAP = true;
+interface TooltipProps {
+    type?: TooltipType;
+    snap?: boolean;
+    headerFormatter?: TooltipValueFormatter;
+}
 interface SettingSpecProps {
@@ -17,6 +22,4 @@ chartStore?: ChartStore;
     showLegend: boolean;
-    /** Specify the tooltip type */
-    tooltipType?: TooltipType;
-    /** Snap tooltip to grid */
-    tooltipSnap?: boolean;
+    /** Either a TooltipType or an object with configuration of type, snap, and/or headerFormatter */
+    tooltip?: TooltipType | TooltipProps;
     debug: boolean;
@@ -23,0 +26,0 @@ legendPosition?: Position;

dist/specs/settings.js

@@ -22,4 +22,10 @@ "use strict";
 exports.DEFAULT_TOOLTIP_SNAP = true;
+function isTooltipProps(config) {
+    return typeof config === 'object';
+}
+function isTooltipType(config) {
+    return typeof config === 'string';
+}
 function updateChartStore(props) {
-    var chartStore = props.chartStore, theme = props.theme, rotation = props.rotation, rendering = props.rendering, animateData = props.animateData, showLegend = props.showLegend, tooltipType = props.tooltipType, tooltipSnap = props.tooltipSnap, legendPosition = props.legendPosition, showLegendDisplayValue = props.showLegendDisplayValue, onElementClick = props.onElementClick, onElementOver = props.onElementOver, onElementOut = props.onElementOut, onBrushEnd = props.onBrushEnd, onLegendItemOver = props.onLegendItemOver, onLegendItemOut = props.onLegendItemOut, onLegendItemClick = props.onLegendItemClick, onLegendItemMinusClick = props.onLegendItemMinusClick, onLegendItemPlusClick = props.onLegendItemPlusClick, debug = props.debug, xDomain = props.xDomain;
+    var chartStore = props.chartStore, theme = props.theme, rotation = props.rotation, rendering = props.rendering, animateData = props.animateData, showLegend = props.showLegend, tooltip = props.tooltip, legendPosition = props.legendPosition, showLegendDisplayValue = props.showLegendDisplayValue, onElementClick = props.onElementClick, onElementOver = props.onElementOver, onElementOut = props.onElementOut, onBrushEnd = props.onBrushEnd, onLegendItemOver = props.onLegendItemOver, onLegendItemOut = props.onLegendItemOut, onLegendItemClick = props.onLegendItemClick, onLegendItemMinusClick = props.onLegendItemMinusClick, onLegendItemPlusClick = props.onLegendItemPlusClick, debug = props.debug, xDomain = props.xDomain;
     if (!chartStore) {
@@ -33,4 +39,11 @@ return;
     chartStore.debug = debug;
-    chartStore.tooltipType.set(tooltipType);
-    chartStore.tooltipSnap.set(tooltipSnap);
+    if (tooltip && isTooltipProps(tooltip)) {
+        var type = tooltip.type, snap = tooltip.snap, headerFormatter = tooltip.headerFormatter;
+        chartStore.tooltipType.set(type);
+        chartStore.tooltipSnap.set(snap);
+        chartStore.tooltipHeaderFormatter = headerFormatter;
+    }
+    else if (tooltip && isTooltipType(tooltip)) {
+        chartStore.tooltipType.set(tooltip);
+    }
     chartStore.setShowLegend(showLegend);
@@ -88,4 +101,6 @@ chartStore.legendPosition = legendPosition;
         debug: false,
-        tooltipType: exports.DEFAULT_TOOLTIP_TYPE,
-        tooltipSnap: exports.DEFAULT_TOOLTIP_SNAP,
+        tooltip: {
+            type: exports.DEFAULT_TOOLTIP_TYPE,
+            snap: exports.DEFAULT_TOOLTIP_SNAP,
+        },
         showLegendDisplayValue: true,
@@ -92,0 +107,0 @@ };

dist/state/chart_state.d.ts

@@ -13,3 +13,3 @@ import { IObservableValue } from 'mobx';
 import { AnnotationId, AxisId, GroupId, SpecId } from '../lib/utils/ids';
-import { TooltipType, TooltipValue } from '../lib/utils/interactions';
+import { TooltipType, TooltipValue, TooltipValueFormatter } from '../lib/utils/interactions';
 import { Scale } from '../lib/utils/scales/scales';
@@ -75,2 +75,3 @@ import { AnnotationDimensions } from './annotation_utils';
     } & import("mobx").IObservableObject;
+    tooltipHeaderFormatter?: TooltipValueFormatter;
     /** cursorPosition is used by tooltip, so this is a way to expose the position for other uses */
@@ -77,0 +78,0 @@ rawCursorPosition: {

dist/state/chart_state.js

@@ -223,3 +223,5 @@ "use strict";
                 if (!xValueInfo) {
-                    xValueInfo = tooltip_1.formatTooltip(indexedGeometry, spec, true, false, xAxis);
+                    // if we have a tooltipHeaderFormatter, then don't pass in the xAxis as the user will define a formatter
+                    var formatterAxis = _this.tooltipHeaderFormatter ? undefined : xAxis;
+                    xValueInfo = tooltip_1.formatTooltip(indexedGeometry, spec, true, false, formatterAxis);
                     return __spread([xValueInfo], acc, [formattedTooltip]);
@@ -226,0 +228,0 @@ }

package.json

 {
   "name": "@elastic/charts",
   "description": "Elastic-Charts data visualization library",
-  "version": "5.2.0",
+  "version": "6.0.0",
   "author": "Marco Vettorello <[e-mail]>",
@@ -6,0 +6,0 @@ "license": "Apache-2.0",

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

Improved metrics

Total package byte prevSize

1694727

increased by0.17%

Lines of code

17186

increased by0.18%

No dependency changes