@forter/chart - npm Package Compare versions

Comparing version 5.19.2 to 5.20.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [5.20.0](https://github.com/forter/web-components/compare/@forter/chart@5.19.2...@forter/chart@5.20.0) (2022-07-26)
+
+
+### Features
+
+* **chart:** add time ranges to tooltips ([#1039](https://github.com/forter/web-components/issues/1039)) ([522ee13](https://github.com/forter/web-components/commit/522ee13))
+
+
+
+
+
 ## [5.19.2](https://github.com/forter/web-components/compare/@forter/chart@5.19.1...@forter/chart@5.19.2) (2022-07-24)
@@ -8,0 +19,0 @@

chart-config-builders/tooltip-config-builder.js

@@ -11,7 +11,11 @@ import { html } from 'lit-element';
     previewMode
-  } = context; // eslint-disable-next-line prefer-destructuring
+  } = context;
+  const {
+    xAxisType,
+    series
+  } = config; // eslint-disable-next-line prefer-destructuring
 
   const {
     seriesType
-  } = config.series[0];
+  } = series[0];
   const isMissingDrilldown = config === null || config === void 0 ? void 0 : (_config$series = config.series) === null || _config$series === void 0 ? void 0 : _config$series.some(singleLine => !singleLine.hasDrillDown);
@@ -23,4 +27,3 @@ context.tooltipPosition = {
 
-  const external = // eslint-disable-next-line max-len
-  chartJSContext => tooltipCallback(chartJSContext, tooltipElement, canvas, previewMode, isMissingDrilldown, seriesType);
+  const external = chartJSContext => tooltipCallback(chartJSContext, tooltipElement, canvas, previewMode, isMissingDrilldown, seriesType, xAxisType);
 
@@ -39,3 +42,3 @@ const callbackObject = {
 
-const tooltipCallback = (chartJSContext, tooltipElement, canvas, previewMode, isMissingDrilldown, seriesType) => {
+const tooltipCallback = (chartJSContext, tooltipElement, canvas, previewMode, isMissingDrilldown, seriesType, xAxisType) => {
   const tooltipModel = chartJSContext.tooltip;
@@ -50,5 +53,24 @@
 
-  extractDataAndRenderTooltip(tooltipModel, tooltipElement, canvas, previewMode, isMissingDrilldown, seriesType);
+  extractDataAndRenderTooltip(tooltipModel, tooltipElement, canvas, previewMode, isMissingDrilldown, seriesType, xAxisType);
 };
 
+const getNextTick = ({
+  dataPoint,
+  xAxisType
+}) => {
+  var _chart$data$datasets$, _chart$data$datasets$2;
+
+  const {
+    chart,
+    raw
+  } = dataPoint;
+  const timeFieldAxisTypes = ['SINGLE_TIME_FIELD_SINGLE_NON_TIME_FIELD', 'SINGLE_TIME_FIELD'];
+  const indexOfCurrentTick = chart.data.datasets[0].data.map(e => e.x).indexOf(raw.x);
+  const nextTick = (_chart$data$datasets$ = chart.data.datasets[0]) === null || _chart$data$datasets$ === void 0 ? void 0 : (_chart$data$datasets$2 = _chart$data$datasets$.data[indexOfCurrentTick + 1]) === null || _chart$data$datasets$2 === void 0 ? void 0 : _chart$data$datasets$2.x;
+  return {
+    isTimeRange: timeFieldAxisTypes.includes(xAxisType) && nextTick,
+    nextTick
+  };
+};
+
 const isTreeMapSeries = seriesType => seriesType === 'TREEMAP';
@@ -77,8 +99,16 @@
 const extractNonTreeMapData = ({
-  dataPoint
+  dataPoint,
+  xAxisType
 }) => {
+  const {
+    isTimeRange,
+    nextTick
+  } = getNextTick({
+    dataPoint,
+    xAxisType
+  });
   return {
     tooltipMainInsight: get(dataPoint, 'raw.yFormatted'),
     mainInsightLabel: get(dataPoint, 'raw.aggregationLabel'),
-    tooltipPositionText: get(dataPoint, 'raw.x'),
+    tooltipPositionText: `${get(dataPoint, 'raw.x')} ${isTimeRange ? `- ${nextTick}` : ''}`,
     note: get(dataPoint, 'raw.note')
@@ -89,3 +119,3 @@ };
 
-const extractDataAndRenderTooltip = (tooltipModel, tooltipElement, canvas, previewMode, isMissingDrilldown, seriesType) => {
+const extractDataAndRenderTooltip = (tooltipModel, tooltipElement, canvas, previewMode, isMissingDrilldown, seriesType, xAxisType) => {
   const dataPoint = get(tooltipModel, 'dataPoints[0]');
@@ -103,3 +133,4 @@ const {
   }) : extractNonTreeMapData({
-    dataPoint
+    dataPoint,
+    xAxisType
   });
@@ -106,0 +137,0 @@ extractedData = {

package.json

 {
   "name": "@forter/chart",
-  "version": "5.19.2",
+  "version": "5.20.0",
   "description": "chart from Forter Components",
@@ -60,3 +60,3 @@ "author": "Forter Developers",
   },
-  "gitHead": "834eddab355592b2bb505f76774760dad4ad6f36"
+  "gitHead": "5b03e539151f4aaf18f7a79e4ed731787a7a782f"
 }

src/chart-config-builders/tooltip-config-builder.js

@@ -6,17 +6,21 @@ import { get, merge } from 'lodash-es';
   const { tooltipElement, canvas, previewMode } = context;
+  const { xAxisType, series } = config;
   // eslint-disable-next-line prefer-destructuring
-  const { seriesType } = config.series[0];
+  const { seriesType } = series[0];
 
   const isMissingDrilldown = config?.series?.some(singleLine => !singleLine.hasDrillDown);
-  context.tooltipPosition = {
-    x: -999,
-    y: -999
-  };
+  context.tooltipPosition = { x: -999, y: -999 };
 
-  const external =
-      // eslint-disable-next-line max-len
-      chartJSContext => tooltipCallback(chartJSContext, tooltipElement, canvas, previewMode, isMissingDrilldown, seriesType);
-  const callbackObject =
-    { options: { plugins: { tooltip: { external } } } };
+  const external = chartJSContext => tooltipCallback(
+    chartJSContext,
+    tooltipElement,
+    canvas,
+    previewMode,
+    isMissingDrilldown,
+    seriesType,
+    xAxisType
+  );
 
+  const callbackObject = { options: { plugins: { tooltip: { external } } } };
+
   return merge(chartJSConfig, callbackObject);
@@ -27,3 +31,3 @@ };
 // eslint-disable-next-line max-len
-const tooltipCallback = (chartJSContext, tooltipElement, canvas, previewMode, isMissingDrilldown, seriesType) => {
+const tooltipCallback = (chartJSContext, tooltipElement, canvas, previewMode, isMissingDrilldown, seriesType, xAxisType) => {
   const tooltipModel = chartJSContext.tooltip;
@@ -38,5 +42,16 @@ if (tooltipModel.opacity === 0) {
   // eslint-disable-next-line max-len
-  extractDataAndRenderTooltip(tooltipModel, tooltipElement, canvas, previewMode, isMissingDrilldown, seriesType);
+  extractDataAndRenderTooltip(tooltipModel, tooltipElement, canvas, previewMode, isMissingDrilldown, seriesType, xAxisType);
 };
 
+const getNextTick = ({ dataPoint, xAxisType }) => {
+  const { chart, raw } = dataPoint;
+  const timeFieldAxisTypes = ['SINGLE_TIME_FIELD_SINGLE_NON_TIME_FIELD', 'SINGLE_TIME_FIELD'];
+  const indexOfCurrentTick = chart.data.datasets[0].data.map(e => e.x).indexOf(raw.x);
+  const nextTick = chart.data.datasets[0]?.data[indexOfCurrentTick + 1]?.x;
+  return {
+    isTimeRange: (timeFieldAxisTypes.includes(xAxisType) && nextTick),
+    nextTick
+  };
+};
+
 const isTreeMapSeries = seriesType => seriesType === 'TREEMAP';
@@ -57,7 +72,8 @@
 
-const extractNonTreeMapData = ({ dataPoint }) => {
+const extractNonTreeMapData = ({ dataPoint, xAxisType }) => {
+  const { isTimeRange, nextTick } = getNextTick({ dataPoint, xAxisType });
   return {
     tooltipMainInsight: get(dataPoint, 'raw.yFormatted'),
     mainInsightLabel: get(dataPoint, 'raw.aggregationLabel'),
-    tooltipPositionText: get(dataPoint, 'raw.x'),
+    tooltipPositionText: `${get(dataPoint, 'raw.x')} ${isTimeRange ? `- ${nextTick}` : ''}`,
     note: get(dataPoint, 'raw.note'),
@@ -68,3 +84,3 @@ };
 // eslint-disable-next-line max-len
-const extractDataAndRenderTooltip = (tooltipModel, tooltipElement, canvas, previewMode, isMissingDrilldown, seriesType) => {
+const extractDataAndRenderTooltip = (tooltipModel, tooltipElement, canvas, previewMode, isMissingDrilldown, seriesType, xAxisType) => {
   const dataPoint = get(tooltipModel, 'dataPoints[0]');
@@ -80,3 +96,3 @@ const { offsetLeft: positionX, offsetTop: positionY } = canvas;
   // eslint-disable-next-line max-len
-  let extractedData = isTreeMapSeries(seriesType) ? extractTreeMapData({ dataPoint }) : extractNonTreeMapData({ dataPoint });
+  let extractedData = isTreeMapSeries(seriesType) ? extractTreeMapData({ dataPoint }) : extractNonTreeMapData({ dataPoint, xAxisType });
   extractedData = { previewMode, isMissingDrilldown, ...extractedData };
@@ -83,0 +99,0 @@ tooltipElement.innerHTML = renderTooltip(extractedData);

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

240891

increased by1.46%

Lines of code

4015

increased by1.08%

No dependency changes