From c218a9e2b021caf1aa72c969ebe9857b67169db9 Mon Sep 17 00:00:00 2001
From: Aleksandr Lesnenko <alxnddr@users.noreply.github.com>
Date: Thu, 12 Jan 2023 19:40:30 -0300
Subject: [PATCH] revert new tooltips for non-stacked series (#27620)
* revert new tooltips for non-stacked series
* types
---
frontend/src/metabase-types/api/dataset.ts | 1 +
.../components/ChartTooltip/ChartTooltip.tsx | 15 +-
.../ChartTooltip/DataPointTooltip/index.ts | 1 -
...ipOld.tsx => KeyValuePairChartTooltip.tsx} | 13 +-
.../StackedDataTooltip.styled.tsx} | 0
.../StackedDataTooltip.tsx} | 12 +-
.../StackedDataTooltip.unit.spec.tsx} | 10 +-
.../ChartTooltip/StackedDataTooltip/index.ts | 1 +
.../utils.ts | 0
.../components/ChartTooltip/types.ts | 16 +-
.../components/ChartTooltip/utils.ts | 5 +-
.../visualizations/shared/types/data.ts | 2 +-
.../visualizations/RowChart/RowChart.tsx | 1 +
.../visualizations/RowChart/utils/events.ts | 112 +++++-----
.../RowChart/utils/events.unit.spec.ts | 204 +++++++++---------
15 files changed, 203 insertions(+), 190 deletions(-)
delete mode 100644 frontend/src/metabase/visualizations/components/ChartTooltip/DataPointTooltip/index.ts
rename frontend/src/metabase/visualizations/components/ChartTooltip/{DataPointTooltipOld.tsx => KeyValuePairChartTooltip.tsx} (86%)
rename frontend/src/metabase/visualizations/components/ChartTooltip/{DataPointTooltip/DataPointTooltip.styled.tsx => StackedDataTooltip/StackedDataTooltip.styled.tsx} (100%)
rename frontend/src/metabase/visualizations/components/ChartTooltip/{DataPointTooltip/DataPointTooltip.tsx => StackedDataTooltip/StackedDataTooltip.tsx} (88%)
rename frontend/src/metabase/visualizations/components/ChartTooltip/{DataPointTooltip/DataPointTooltip.unit.spec.tsx => StackedDataTooltip/StackedDataTooltip.unit.spec.tsx} (90%)
create mode 100644 frontend/src/metabase/visualizations/components/ChartTooltip/StackedDataTooltip/index.ts
rename frontend/src/metabase/visualizations/components/ChartTooltip/{DataPointTooltip => StackedDataTooltip}/utils.ts (100%)
diff --git a/frontend/src/metabase-types/api/dataset.ts b/frontend/src/metabase-types/api/dataset.ts
index 22ae14e5d6a..0051890d155 100644
--- a/frontend/src/metabase-types/api/dataset.ts
+++ b/frontend/src/metabase-types/api/dataset.ts
@@ -21,6 +21,7 @@ export interface DatasetColumn {
semantic_type?: string;
remapped_from?: string;
remapped_to?: string;
+ effective_type?: string;
binning_info?: {
bin_width?: number;
};
diff --git a/frontend/src/metabase/visualizations/components/ChartTooltip/ChartTooltip.tsx b/frontend/src/metabase/visualizations/components/ChartTooltip/ChartTooltip.tsx
index c49546c049b..26c9592bdca 100644
--- a/frontend/src/metabase/visualizations/components/ChartTooltip/ChartTooltip.tsx
+++ b/frontend/src/metabase/visualizations/components/ChartTooltip/ChartTooltip.tsx
@@ -2,8 +2,8 @@ import React, { MouseEvent, useMemo } from "react";
import _ from "underscore";
import { getEventTarget } from "metabase/lib/dom";
import Tooltip from "metabase/core/components/Tooltip";
-import DataPointTooltip from "./DataPointTooltip";
-import DataPointTooltipOld from "./DataPointTooltipOld";
+import StackedDataTooltip from "./StackedDataTooltip";
+import KeyValuePairChartTooltip from "./KeyValuePairChartTooltip";
import TimelineEventTooltip from "./TimelineEventTooltip";
import {
HoveredObject,
@@ -25,11 +25,11 @@ const ChartTooltip = ({ hovered, settings }: ChartTooltipProps) => {
return <TimelineEventTooltip hovered={hovered as HoveredTimelineEvent} />;
}
- if (hovered.dataTooltip) {
- return <DataPointTooltip {...hovered.dataTooltip} />;
+ if (hovered.stackedTooltipModel) {
+ return <StackedDataTooltip {...hovered.stackedTooltipModel} />;
}
- return <DataPointTooltipOld hovered={hovered} settings={settings} />;
+ return <KeyValuePairChartTooltip hovered={hovered} settings={settings} />;
}, [hovered, settings]);
const isNotEmpty = useMemo(() => {
@@ -39,7 +39,7 @@ const ChartTooltip = ({ hovered, settings }: ChartTooltipProps) => {
return (
hovered.value !== undefined ||
!_.isEmpty(hovered.timelineEvents) ||
- !_.isEmpty(hovered.dataTooltip) ||
+ !_.isEmpty(hovered.stackedTooltipModel) ||
!_.isEmpty(hovered.data) ||
!_.isEmpty(hovered.dimensions)
);
@@ -49,6 +49,7 @@ const ChartTooltip = ({ hovered, settings }: ChartTooltipProps) => {
const hasTargetElement =
hovered?.element != null && document.body.contains(hovered.element);
const isOpen = isNotEmpty && (hasTargetElement || hasTargetEvent);
+ const isPadded = hovered?.stackedTooltipModel == null;
const target = hasTargetElement
? hovered?.element
@@ -61,7 +62,7 @@ const ChartTooltip = ({ hovered, settings }: ChartTooltipProps) => {
preventOverflow
reference={target}
isOpen={isOpen}
- isPadded={false}
+ isPadded={isPadded}
tooltip={tooltip}
maxWidth="unset"
/>
diff --git a/frontend/src/metabase/visualizations/components/ChartTooltip/DataPointTooltip/index.ts b/frontend/src/metabase/visualizations/components/ChartTooltip/DataPointTooltip/index.ts
deleted file mode 100644
index 2abb9411f28..00000000000
--- a/frontend/src/metabase/visualizations/components/ChartTooltip/DataPointTooltip/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./DataPointTooltip";
diff --git a/frontend/src/metabase/visualizations/components/ChartTooltip/DataPointTooltipOld.tsx b/frontend/src/metabase/visualizations/components/ChartTooltip/KeyValuePairChartTooltip.tsx
similarity index 86%
rename from frontend/src/metabase/visualizations/components/ChartTooltip/DataPointTooltipOld.tsx
rename to frontend/src/metabase/visualizations/components/ChartTooltip/KeyValuePairChartTooltip.tsx
index c5e54b0f8cd..66a83479a22 100644
--- a/frontend/src/metabase/visualizations/components/ChartTooltip/DataPointTooltipOld.tsx
+++ b/frontend/src/metabase/visualizations/components/ChartTooltip/KeyValuePairChartTooltip.tsx
@@ -1,6 +1,6 @@
import React, { useMemo } from "react";
-import { Column } from "metabase-types/types/Dataset";
import { getFriendlyName } from "metabase/visualizations/lib/utils";
+import { RemappingHydratedDatasetColumn } from "metabase/visualizations/shared/types/data";
import {
DataPoint,
HoveredDimension,
@@ -9,12 +9,15 @@ import {
} from "./types";
import { formatValueForTooltip } from "./utils";
-export interface DataPointTooltipProps {
+export interface StackedDataTooltipProps {
hovered: HoveredObject;
settings: VisualizationSettings;
}
-const DataPointTooltipOld = ({ hovered, settings }: DataPointTooltipProps) => {
+const KeyValuePairChartTooltip = ({
+ hovered,
+ settings,
+}: StackedDataTooltipProps) => {
const rows = useMemo(() => getRows(hovered), [hovered]);
return (
@@ -37,7 +40,7 @@ const DataPointTooltipOld = ({ hovered, settings }: DataPointTooltipProps) => {
export interface TooltipRowProps {
name?: string;
value?: any;
- column?: Column;
+ column?: RemappingHydratedDatasetColumn;
settings: VisualizationSettings;
}
@@ -85,4 +88,4 @@ const getRowFromDimension = ({ column, value }: HoveredDimension) => ({
col: column,
});
-export default DataPointTooltipOld;
+export default KeyValuePairChartTooltip;
diff --git a/frontend/src/metabase/visualizations/components/ChartTooltip/DataPointTooltip/DataPointTooltip.styled.tsx b/frontend/src/metabase/visualizations/components/ChartTooltip/StackedDataTooltip/StackedDataTooltip.styled.tsx
similarity index 100%
rename from frontend/src/metabase/visualizations/components/ChartTooltip/DataPointTooltip/DataPointTooltip.styled.tsx
rename to frontend/src/metabase/visualizations/components/ChartTooltip/StackedDataTooltip/StackedDataTooltip.styled.tsx
diff --git a/frontend/src/metabase/visualizations/components/ChartTooltip/DataPointTooltip/DataPointTooltip.tsx b/frontend/src/metabase/visualizations/components/ChartTooltip/StackedDataTooltip/StackedDataTooltip.tsx
similarity index 88%
rename from frontend/src/metabase/visualizations/components/ChartTooltip/DataPointTooltip/DataPointTooltip.tsx
rename to frontend/src/metabase/visualizations/components/ChartTooltip/StackedDataTooltip/StackedDataTooltip.tsx
index e781388a8f7..f21df1a971a 100644
--- a/frontend/src/metabase/visualizations/components/ChartTooltip/DataPointTooltip/DataPointTooltip.tsx
+++ b/frontend/src/metabase/visualizations/components/ChartTooltip/StackedDataTooltip/StackedDataTooltip.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { TooltipRow, TooltipTotalRow } from "../TooltipRow";
-import { TooltipModel } from "../types";
+import type { StackedTooltipModel } from "../types";
import {
DataPointHeader,
DataPointTableHeader,
@@ -8,19 +8,19 @@ import {
DataPointTableBody,
DataPointTable,
DataPointTableFooter,
-} from "./DataPointTooltip.styled";
+} from "./StackedDataTooltip.styled";
import { getPercent, getTotalValue } from "./utils";
-type DataPointTooltipProps = TooltipModel;
+type StackedDataTooltipProps = StackedTooltipModel;
-const DataPointTooltip = ({
+const StackedDataTooltip = ({
headerTitle,
headerRows,
bodyRows = [],
showTotal,
showPercentages,
totalFormatter = (value: unknown) => String(value),
-}: DataPointTooltipProps) => {
+}: StackedDataTooltipProps) => {
const total = getTotalValue(headerRows, bodyRows);
const isShowingTotalSensible = headerRows.length + bodyRows.length > 1;
@@ -72,4 +72,4 @@ const DataPointTooltip = ({
);
};
-export default DataPointTooltip;
+export default StackedDataTooltip;
diff --git a/frontend/src/metabase/visualizations/components/ChartTooltip/DataPointTooltip/DataPointTooltip.unit.spec.tsx b/frontend/src/metabase/visualizations/components/ChartTooltip/StackedDataTooltip/StackedDataTooltip.unit.spec.tsx
similarity index 90%
rename from frontend/src/metabase/visualizations/components/ChartTooltip/DataPointTooltip/DataPointTooltip.unit.spec.tsx
rename to frontend/src/metabase/visualizations/components/ChartTooltip/StackedDataTooltip/StackedDataTooltip.unit.spec.tsx
index d3676648f2f..49138354926 100644
--- a/frontend/src/metabase/visualizations/components/ChartTooltip/DataPointTooltip/DataPointTooltip.unit.spec.tsx
+++ b/frontend/src/metabase/visualizations/components/ChartTooltip/StackedDataTooltip/StackedDataTooltip.unit.spec.tsx
@@ -1,8 +1,8 @@
import React from "react";
import { render, screen } from "@testing-library/react";
-import { TooltipModel } from "../types";
-import DataPointTooltip from "./DataPointTooltip";
+import type { StackedTooltipModel } from "../types";
+import StackedDataTooltip from "./StackedDataTooltip";
const defaultHeaderRows = [
{
@@ -33,9 +33,9 @@ const setup = ({
headerRows = defaultHeaderRows,
bodyRows = defaultBodyRows,
...rest
-}: Partial<TooltipModel> = {}) => {
+}: Partial<StackedTooltipModel> = {}) => {
render(
- <DataPointTooltip
+ <StackedDataTooltip
headerTitle={headerTitle}
headerRows={headerRows}
bodyRows={bodyRows}
@@ -60,7 +60,7 @@ const setup = ({
};
};
-describe("DataPointTooltip", () => {
+describe("StackedDataTooltip", () => {
it("renders the header with formatted name—value pairs", () => {
const { rowNames, rowValues, header } = setup();
expect(header).toHaveTextContent("header-title");
diff --git a/frontend/src/metabase/visualizations/components/ChartTooltip/StackedDataTooltip/index.ts b/frontend/src/metabase/visualizations/components/ChartTooltip/StackedDataTooltip/index.ts
new file mode 100644
index 00000000000..1352cf6d9ea
--- /dev/null
+++ b/frontend/src/metabase/visualizations/components/ChartTooltip/StackedDataTooltip/index.ts
@@ -0,0 +1 @@
+export { default } from "./StackedDataTooltip";
diff --git a/frontend/src/metabase/visualizations/components/ChartTooltip/DataPointTooltip/utils.ts b/frontend/src/metabase/visualizations/components/ChartTooltip/StackedDataTooltip/utils.ts
similarity index 100%
rename from frontend/src/metabase/visualizations/components/ChartTooltip/DataPointTooltip/utils.ts
rename to frontend/src/metabase/visualizations/components/ChartTooltip/StackedDataTooltip/utils.ts
diff --git a/frontend/src/metabase/visualizations/components/ChartTooltip/types.ts b/frontend/src/metabase/visualizations/components/ChartTooltip/types.ts
index 9e5057c26ac..ed55a7987ec 100644
--- a/frontend/src/metabase/visualizations/components/ChartTooltip/types.ts
+++ b/frontend/src/metabase/visualizations/components/ChartTooltip/types.ts
@@ -1,20 +1,22 @@
import { MouseEvent } from "react";
-import { Column } from "metabase-types/types/Dataset";
import { TimelineEvent } from "metabase-types/api/timeline";
+import { RemappingHydratedDatasetColumn } from "metabase/visualizations/shared/types/data";
export type VisualizationSettings = Record<string, unknown> & {
- column?: (col: Column) => Column;
+ column?: (
+ col: RemappingHydratedDatasetColumn,
+ ) => RemappingHydratedDatasetColumn;
};
export interface DataPoint {
key: string;
- col?: Column;
+ col?: RemappingHydratedDatasetColumn;
value?: unknown;
}
export interface HoveredDimension {
value: string;
- column: Column;
+ column: RemappingHydratedDatasetColumn;
}
export interface HoveredTimelineEvent {
@@ -29,7 +31,7 @@ export interface TooltipRowModel {
formatter?: (value: unknown) => string;
}
-export interface TooltipModel {
+export interface StackedTooltipModel {
headerTitle?: string;
headerRows: TooltipRowModel[];
bodyRows?: TooltipRowModel[];
@@ -43,12 +45,12 @@ export interface HoveredObject {
axisIndex?: number;
seriesIndex?: number;
value?: unknown;
- column?: Column;
+ column?: RemappingHydratedDatasetColumn;
timelineEvents?: TimelineEvent[];
data?: DataPoint[];
dimensions?: HoveredDimension[];
settings?: VisualizationSettings;
element?: HTMLElement;
event?: MouseEvent;
- dataTooltip?: TooltipModel;
+ stackedTooltipModel?: StackedTooltipModel;
}
diff --git a/frontend/src/metabase/visualizations/components/ChartTooltip/utils.ts b/frontend/src/metabase/visualizations/components/ChartTooltip/utils.ts
index a5e34a5bba0..d9fc9ae2aa2 100644
--- a/frontend/src/metabase/visualizations/components/ChartTooltip/utils.ts
+++ b/frontend/src/metabase/visualizations/components/ChartTooltip/utils.ts
@@ -1,6 +1,5 @@
-import { MouseEvent } from "react";
-import { Column } from "metabase-types/types/Dataset";
import { formatValue } from "metabase/lib/formatting";
+import { RemappingHydratedDatasetColumn } from "metabase/visualizations/shared/types/data";
import { VisualizationSettings } from "./types";
export const formatValueForTooltip = ({
@@ -9,7 +8,7 @@ export const formatValueForTooltip = ({
settings,
}: {
value?: unknown;
- column?: Column;
+ column?: RemappingHydratedDatasetColumn;
settings?: VisualizationSettings;
}) =>
formatValue(value, {
diff --git a/frontend/src/metabase/visualizations/shared/types/data.ts b/frontend/src/metabase/visualizations/shared/types/data.ts
index f81a7aba6e7..4d8fdd537eb 100644
--- a/frontend/src/metabase/visualizations/shared/types/data.ts
+++ b/frontend/src/metabase/visualizations/shared/types/data.ts
@@ -32,7 +32,7 @@ export type MetricDatum = { [key: MetricName]: MetricValue };
export type GroupedDatum = {
dimensionValue: RowValue;
metrics: MetricDatum;
- isClickable: boolean;
+ isClickable?: boolean;
breakout?: {
[key: BreakoutName]: {
metrics: MetricDatum;
diff --git a/frontend/src/metabase/visualizations/visualizations/RowChart/RowChart.tsx b/frontend/src/metabase/visualizations/visualizations/RowChart/RowChart.tsx
index 84f871f95ac..305eecdb715 100644
--- a/frontend/src/metabase/visualizations/visualizations/RowChart/RowChart.tsx
+++ b/frontend/src/metabase/visualizations/visualizations/RowChart/RowChart.tsx
@@ -192,6 +192,7 @@ const RowChartVisualization = ({
bar,
settings,
chartColumns,
+ data.cols,
series,
seriesColors,
);
diff --git a/frontend/src/metabase/visualizations/visualizations/RowChart/utils/events.ts b/frontend/src/metabase/visualizations/visualizations/RowChart/utils/events.ts
index 8e25e2895ba..14574c8fb6d 100644
--- a/frontend/src/metabase/visualizations/visualizations/RowChart/utils/events.ts
+++ b/frontend/src/metabase/visualizations/visualizations/RowChart/utils/events.ts
@@ -22,7 +22,12 @@ import {
} from "metabase/visualizations/shared/types/data";
import { sumMetric } from "metabase/visualizations/shared/utils/data";
import { formatValueForTooltip } from "metabase/visualizations/lib/tooltip";
-import { TooltipRowModel } from "metabase/visualizations/components/ChartTooltip/types";
+import {
+ DataPoint,
+ StackedTooltipModel,
+ TooltipRowModel,
+} from "metabase/visualizations/components/ChartTooltip/types";
+import { getStackOffset } from "metabase/visualizations/lib/settings/stacking";
import { isMetric } from "metabase-lib/types/utils/isa";
const getMetricColumnData = (
@@ -193,31 +198,7 @@ const getBreakoutsTooltipRows = <TDatum>(
};
});
-const getMultipleMetricsTooltipRows = <TDatum>(
- bar: BarData<TDatum>,
- settings: VisualizationSettings,
- multipleSeries: Series<TDatum, SeriesInfo>[],
- seriesColors: Record<string, string>,
-): TooltipRowModel[] =>
- multipleSeries.map(series => {
- const value = series.xAccessor(bar.datum);
-
- return {
- name: series.seriesName,
- color: seriesColors[series.seriesKey],
- value,
- formatter: value =>
- String(
- formatValueForTooltip({
- value,
- settings,
- column: series.seriesInfo?.metricColumn,
- }),
- ),
- };
- });
-
-const getTooltipModel = <TDatum>(
+export const getTooltipModel = <TDatum>(
bar: BarData<TDatum>,
settings: VisualizationSettings,
chartColumns: ChartColumns,
@@ -236,54 +217,79 @@ const getTooltipModel = <TDatum>(
);
const hasBreakout = "breakout" in chartColumns;
-
- const rows = hasBreakout
- ? getBreakoutsTooltipRows(bar, settings, multipleSeries, seriesColors)
- : getMultipleMetricsTooltipRows(
- bar,
- settings,
- multipleSeries,
- seriesColors,
- );
+ const rows = getBreakoutsTooltipRows(
+ bar,
+ settings,
+ multipleSeries,
+ seriesColors,
+ );
const [headerRows, bodyRows] = _.partition(
rows,
row => row.name === series.seriesName,
);
- const totalFormatter = hasBreakout
- ? (value: unknown) =>
- String(
- formatValueForTooltip({
- value,
- settings,
- column: chartColumns.metric.column,
- }),
- )
- : undefined;
+ const totalFormatter = (value: unknown) =>
+ String(
+ formatValueForTooltip({
+ value,
+ settings,
+ column: hasBreakout
+ ? chartColumns.metric.column
+ : chartColumns.metrics[0].column,
+ }),
+ );
return {
headerTitle,
headerRows,
bodyRows,
totalFormatter,
- showTotal: hasBreakout,
- showPercentages: hasBreakout,
+ showTotal: true,
+ showPercentages: true,
};
};
-export const getHoverData = <TDatum>(
- bar: BarData<TDatum>,
+export const getHoverData = (
+ bar: BarData<GroupedDatum>,
settings: VisualizationSettings,
chartColumns: ChartColumns,
- multipleSeries: Series<TDatum, SeriesInfo>[],
+ datasetColumns: DatasetColumn[],
+ multipleSeries: Series<GroupedDatum, SeriesInfo>[],
seriesColors: Record<string, string>,
-) => {
- return {
+): {
+ settings: VisualizationSettings;
+ datumIndex: number;
+ index: number;
+ data?: DataPoint[];
+ stackedTooltipModel?: StackedTooltipModel;
+} => {
+ const hoverData = {
settings,
datumIndex: bar.datumIndex,
index: bar.seriesIndex,
- dataTooltip: getTooltipModel(
+ };
+
+ const hasMultipleSeries =
+ "breakout" in chartColumns || chartColumns.metrics.length > 1;
+ const isStacked = getStackOffset(settings) != null;
+ if (!isStacked || !hasMultipleSeries) {
+ const data = getColumnsData(
+ chartColumns,
+ bar.series,
+ bar.datum,
+ datasetColumns,
+ );
+
+ return {
+ ...hoverData,
+ data,
+ };
+ }
+
+ return {
+ ...hoverData,
+ stackedTooltipModel: getTooltipModel(
bar,
settings,
chartColumns,
diff --git a/frontend/src/metabase/visualizations/visualizations/RowChart/utils/events.unit.spec.ts b/frontend/src/metabase/visualizations/visualizations/RowChart/utils/events.unit.spec.ts
index f8ee455e467..0c1166d3ee8 100644
--- a/frontend/src/metabase/visualizations/visualizations/RowChart/utils/events.unit.spec.ts
+++ b/frontend/src/metabase/visualizations/visualizations/RowChart/utils/events.unit.spec.ts
@@ -1,140 +1,140 @@
+import { VisualizationSettings } from "metabase-types/api";
+import { MultipleMetricsChartColumns } from "metabase/visualizations/lib/graph/columns";
+import { BarData } from "metabase/visualizations/shared/components/RowChart/types";
import {
- BreakoutChartColumns,
- MultipleMetricsChartColumns,
-} from "metabase/visualizations/lib/graph/columns";
-import { RemappingHydratedDatasetColumn } from "metabase/visualizations/shared/types/data";
+ GroupedDatum,
+ RemappingHydratedDatasetColumn,
+} from "metabase/visualizations/shared/types/data";
import { getHoverData } from "./events";
-const data = [
- { y: "foo", x: 100, x1: 200 },
- { y: "bar", x: 200, x1: 400 },
- { y: "baz", x: 300, x1: 600 },
+const datasetColumns = [
+ { name: "y" } as RemappingHydratedDatasetColumn,
+ { name: "x" } as RemappingHydratedDatasetColumn,
+ { name: "x1" } as RemappingHydratedDatasetColumn,
];
-type TestDatum = { y: string; x: number; x1: number };
+const chartColumns: MultipleMetricsChartColumns = {
+ dimension: {
+ index: 0,
+ column: datasetColumns[0],
+ },
+ metrics: [
+ {
+ index: 1,
+ column: datasetColumns[1],
+ },
+ {
+ index: 2,
+ column: datasetColumns[2],
+ },
+ ],
+};
+
+const multipleMetricsData: GroupedDatum[] = [
+ {
+ dimensionValue: "foo",
+ metrics: { x: 100, x1: 200 },
+ rawRows: [],
+ },
+];
+
+const seriesColors = {
+ x: "red",
+ x1: "green",
+};
const series1 = {
- seriesKey: "series 1",
+ seriesKey: "x",
seriesName: "Series 1",
- xAccessor: (datum: TestDatum) => datum.x,
- yAccessor: (datum: TestDatum) => datum.y,
+ xAccessor: (datum: GroupedDatum) => datum.metrics["x"],
+ yAccessor: (datum: GroupedDatum) => datum.dimensionValue,
};
const series2 = {
- seriesKey: "series 2",
+ seriesKey: "x1",
seriesName: "Series 2",
- xAccessor: (datum: TestDatum) => datum.x1,
- yAccessor: (datum: TestDatum) => datum.y,
+ xAccessor: (datum: GroupedDatum) => datum.metrics["x1"],
+ yAccessor: (datum: GroupedDatum) => datum.dimensionValue,
};
-const seriesColors = {
- "series 1": "red",
- "series 2": "green",
-};
-
-const barData = {
- dimensionValue: "2017",
+const barData: BarData<GroupedDatum> = {
isNegative: false,
xStartValue: 0,
xEndValue: 100,
yValue: "foo",
- datum: data[0],
+ datum: multipleMetricsData[0],
datumIndex: 0,
series: series1,
seriesIndex: 0,
};
-const breakoutChartColumns: BreakoutChartColumns = {
- dimension: {
- index: 0,
- column: {} as RemappingHydratedDatasetColumn,
- },
- breakout: {
- index: 1,
- column: {} as RemappingHydratedDatasetColumn,
- },
- metric: {
- index: 2,
- column: {} as RemappingHydratedDatasetColumn,
- },
-};
-
-const multipleMetricsChartColumns: MultipleMetricsChartColumns = {
- dimension: {
- index: 0,
- column: {} as RemappingHydratedDatasetColumn,
- },
- metrics: [
- {
- index: 1,
- column: {} as RemappingHydratedDatasetColumn,
- },
- {
- index: 2,
- column: {} as RemappingHydratedDatasetColumn,
- },
- ],
-};
-
describe("events utils", () => {
describe("getHoverData", () => {
- it("sets tooltip model rows", () => {
- const {
- dataTooltip: { headerRows, bodyRows, headerTitle },
- } = getHoverData(
- barData,
- {},
- breakoutChartColumns,
- [series1, series2],
- seriesColors,
- );
+ it.each(["stacked", "normalized"])(
+ "returns stacked tooltip model for stacked charts",
+ stackType => {
+ const tooltipModel = getHoverData(
+ barData,
+ {
+ "stackable.stack_type":
+ stackType as VisualizationSettings["stackable.stack_type"],
+ },
+ chartColumns,
+ datasetColumns,
+ [series1, series2],
+ seriesColors,
+ ).stackedTooltipModel;
- expect(headerTitle).toBe("foo");
- expect(headerRows).toHaveLength(1);
- expect(headerRows[0]).toEqual(
- expect.objectContaining({
- color: "red",
- name: "Series 1",
- value: 100,
- }),
- );
- expect(bodyRows).toHaveLength(1);
- expect(bodyRows[0]).toEqual(
- expect.objectContaining({
- color: "green",
- name: "Series 2",
- value: 200,
- }),
- );
- });
+ const { headerRows, bodyRows, headerTitle } = tooltipModel ?? {};
- it("sets showTotal and showPercentages to true for charts with breakouts", () => {
- const {
- dataTooltip: { showTotal, showPercentages },
- } = getHoverData(
+ expect(headerTitle).toBe("foo");
+ expect(headerRows).toHaveLength(1);
+ expect(headerRows?.[0]).toEqual(
+ expect.objectContaining({
+ color: "red",
+ name: "Series 1",
+ value: 100,
+ }),
+ );
+ expect(bodyRows).toHaveLength(1);
+ expect(bodyRows?.[0]).toEqual(
+ expect.objectContaining({
+ color: "green",
+ name: "Series 2",
+ value: 200,
+ }),
+ );
+ },
+ );
+
+ it("does not return stacked tooltip model for stacked charts with a single metric without a breakout", () => {
+ const tooltipModel = getHoverData(
barData,
- {},
- breakoutChartColumns,
- [series1, series2],
+ {
+ "stackable.stack_type": "stacked",
+ },
+ {
+ dimension: chartColumns.dimension,
+ metrics: [chartColumns.metrics[0]],
+ },
+ datasetColumns,
+ [series1],
seriesColors,
- );
+ ).stackedTooltipModel;
- expect(showTotal).toBe(true);
- expect(showPercentages).toBe(true);
+ expect(tooltipModel).not.toBeDefined();
});
- it("sets showTotal and showPercentages to false for charts without breakouts", () => {
- const {
- dataTooltip: { showTotal, showPercentages },
- } = getHoverData(
+ it("does not return stacked tooltip model for non-stacked charts", () => {
+ const tooltipModel = getHoverData(
barData,
{},
- multipleMetricsChartColumns,
- [series1, series2],
+ chartColumns,
+ datasetColumns,
+ [series1, series1],
seriesColors,
- );
+ ).stackedTooltipModel;
- expect(showTotal).toBe(false);
- expect(showPercentages).toBe(false);
+ expect(tooltipModel).not.toBeDefined();
});
});
});
--
GitLab