From f6085da31e4649069a9cbff63d4fdc12f5f3ce4b Mon Sep 17 00:00:00 2001
From: Benoit Vinay <ben@benoitvinay.com>
Date: Mon, 14 Mar 2022 14:29:36 +0100
Subject: [PATCH] Clean up static chart components accessors (#20968)
* accessors constants created
* accessors dependencies removed from all charts
* Removed accessors dependencies from BE JS for static viz
* Removed accessors references in chart editor
* accessors added to defaultProps
* Remove accessors in tests
* defaultProps removed form static viz components
---
.../metabase/internal/pages/StaticVizPage.jsx | 22 +++------------
.../CategoricalAreaChart.jsx | 10 +++++--
.../CategoricalAreaChart/constants.ts | 4 ---
.../CategoricalBarChart.jsx | 10 +++++--
.../CategoricalBarChart/constants.ts | 4 ---
.../CategoricalDonutChart.jsx | 8 +++++-
.../CategoricalDonutChart/constants.ts | 4 ---
.../CategoricalLineChart.jsx | 10 +++++--
.../CategoricalLineChart/constants.ts | 4 ---
.../CategoricalWaterfallChart.jsx | 10 +++++--
.../CategoricalWaterfallChart/constants.ts | 4 ---
.../TimeSeriesAreaChart.jsx | 10 +++++--
.../TimeSeriesAreaChart/constants.ts | 4 ---
.../TimeSeriesBarChart/TimeSeriesBarChart.jsx | 10 +++++--
.../TimeSeriesBarChart/constants.ts | 4 ---
.../TimeSeriesLineChart.jsx | 10 +++++--
.../TimeSeriesLineChart/constants.ts | 4 ---
.../TimeSeriesWaterfallChart.jsx | 10 +++++--
.../TimeSeriesWaterfallChart/constants.ts | 4 ---
.../static-viz/constants/accessors.ts | 14 ++++++++++
.../StaticChart/StaticChart.unit.spec.js | 28 -------------------
.../static-viz/lib/waterfall.unit.spec.js | 16 +++++------
.../frontend_shared/static_viz_interface.js | 24 ----------------
23 files changed, 97 insertions(+), 131 deletions(-)
create mode 100644 frontend/src/metabase/static-viz/constants/accessors.ts
diff --git a/frontend/src/metabase/internal/pages/StaticVizPage.jsx b/frontend/src/metabase/internal/pages/StaticVizPage.jsx
index a86fb6058c1..30067f1ccee 100644
--- a/frontend/src/metabase/internal/pages/StaticVizPage.jsx
+++ b/frontend/src/metabase/internal/pages/StaticVizPage.jsx
@@ -66,14 +66,6 @@ import {
LINE_AREA_BAR_DEFAULT_OPTIONS_7,
} from "../../static-viz/components/LineAreaBarChart/constants";
-function setAccessorsForChartOptions(index, options) {
- const optionsCopy = { ...options };
- if (STATIC_CHART_DEFAULT_OPTIONS[index].accessors) {
- optionsCopy.accessors = STATIC_CHART_DEFAULT_OPTIONS[index].accessors;
- }
- return optionsCopy;
-}
-
function chartOptionsToStr(options) {
if (typeof options === "object") {
return JSON.stringify(options, null, 2);
@@ -82,7 +74,6 @@ function chartOptionsToStr(options) {
}
export default function StaticVizPage() {
- const [staticChartTypeIndex, setStaticChartTypeIndex] = useState(-1);
const [staticChartType, setStaticChartType] = useState(null);
const [staticChartCustomOptions, setStaticChartCustomOptions] = useState(
null,
@@ -92,7 +83,6 @@ export default function StaticVizPage() {
function chartOptionsToObj(optionsStr) {
try {
const chartOptions = JSON.parse(optionsStr);
- delete chartOptions["accessors"];
setStaticChartError(null);
return chartOptions;
} catch (err) {
@@ -121,11 +111,10 @@ export default function StaticVizPage() {
className="w-full mt1"
onChange={e => {
const index = parseInt(e.target.value);
- setStaticChartTypeIndex(index);
setStaticChartType(STATIC_CHART_TYPES[index]);
- const chartOptions = { ...STATIC_CHART_DEFAULT_OPTIONS[index] };
- delete chartOptions["accessors"];
- setStaticChartCustomOptions(chartOptions);
+ setStaticChartCustomOptions({
+ ...STATIC_CHART_DEFAULT_OPTIONS[index],
+ });
}}
>
<option id="">---</option>
@@ -162,10 +151,7 @@ export default function StaticVizPage() {
<div className="text-code-plain w-full mt1">
<StaticChart
type={staticChartType}
- options={setAccessorsForChartOptions(
- staticChartTypeIndex,
- staticChartCustomOptions,
- )}
+ options={{ ...staticChartCustomOptions }}
/>
</div>
)}
diff --git a/frontend/src/metabase/static-viz/components/CategoricalAreaChart/CategoricalAreaChart.jsx b/frontend/src/metabase/static-viz/components/CategoricalAreaChart/CategoricalAreaChart.jsx
index d5df42bd7b4..3e0a28021b6 100644
--- a/frontend/src/metabase/static-viz/components/CategoricalAreaChart/CategoricalAreaChart.jsx
+++ b/frontend/src/metabase/static-viz/components/CategoricalAreaChart/CategoricalAreaChart.jsx
@@ -15,13 +15,14 @@ import {
} from "../../lib/axes";
import { formatNumber } from "../../lib/numbers";
import { truncateText } from "../../lib/text";
+import { POSITIONAL_ACCESSORS } from "../../constants/accessors";
const propTypes = {
data: PropTypes.array.isRequired,
accessors: PropTypes.shape({
x: PropTypes.func.isRequired,
y: PropTypes.func.isRequired,
- }).isRequired,
+ }),
settings: PropTypes.shape({
x: PropTypes.object,
y: PropTypes.object,
@@ -59,7 +60,12 @@ const layout = {
strokeDasharray: "4",
};
-const CategoricalAreaChart = ({ data, accessors, settings, labels }) => {
+const CategoricalAreaChart = ({
+ data,
+ accessors = POSITIONAL_ACCESSORS,
+ settings,
+ labels,
+}) => {
const colors = settings?.colors;
const isVertical = data.length > 10;
const xTickWidth = getXTickWidth(
diff --git a/frontend/src/metabase/static-viz/components/CategoricalAreaChart/constants.ts b/frontend/src/metabase/static-viz/components/CategoricalAreaChart/constants.ts
index 53f112b1451..7c91372f58e 100644
--- a/frontend/src/metabase/static-viz/components/CategoricalAreaChart/constants.ts
+++ b/frontend/src/metabase/static-viz/components/CategoricalAreaChart/constants.ts
@@ -15,10 +15,6 @@ export const CATEGORICAL_AREA_CHART_DEFAULT_OPTIONS = {
["Roderick Herman", 50],
["Ruth Dougherty", 75],
],
- accessors: {
- x: (row: any[]) => row[0],
- y: (row: any[]) => row[1],
- },
labels: {
left: "Tasks",
bottom: "People",
diff --git a/frontend/src/metabase/static-viz/components/CategoricalBarChart/CategoricalBarChart.jsx b/frontend/src/metabase/static-viz/components/CategoricalBarChart/CategoricalBarChart.jsx
index bcd586c60df..edb38de3b6c 100644
--- a/frontend/src/metabase/static-viz/components/CategoricalBarChart/CategoricalBarChart.jsx
+++ b/frontend/src/metabase/static-viz/components/CategoricalBarChart/CategoricalBarChart.jsx
@@ -15,13 +15,14 @@ import {
} from "../../lib/axes";
import { formatNumber } from "../../lib/numbers";
import { truncateText } from "../../lib/text";
+import { POSITIONAL_ACCESSORS } from "../../constants/accessors";
const propTypes = {
data: PropTypes.array.isRequired,
accessors: PropTypes.shape({
x: PropTypes.func.isRequired,
y: PropTypes.func.isRequired,
- }).isRequired,
+ }),
settings: PropTypes.shape({
x: PropTypes.object,
y: PropTypes.object,
@@ -58,7 +59,12 @@ const layout = {
strokeDasharray: "4",
};
-const CategoricalBarChart = ({ data, accessors, settings, labels }) => {
+const CategoricalBarChart = ({
+ data,
+ accessors = POSITIONAL_ACCESSORS,
+ settings,
+ labels,
+}) => {
const colors = settings?.colors;
const isVertical = data.length > 10;
const xTickWidth = getXTickWidth(
diff --git a/frontend/src/metabase/static-viz/components/CategoricalBarChart/constants.ts b/frontend/src/metabase/static-viz/components/CategoricalBarChart/constants.ts
index b47a9a30bb5..cba67d6241f 100644
--- a/frontend/src/metabase/static-viz/components/CategoricalBarChart/constants.ts
+++ b/frontend/src/metabase/static-viz/components/CategoricalBarChart/constants.ts
@@ -15,10 +15,6 @@ export const CATEGORICAL_BAR_CHART_DEFAULT_OPTIONS = {
["Roderick Herman", 50],
["Ruth Dougherty", 75],
],
- accessors: {
- x: (row: any[]) => row[0],
- y: (row: any[]) => row[1],
- },
labels: {
left: "Tasks",
bottom: "People",
diff --git a/frontend/src/metabase/static-viz/components/CategoricalDonutChart/CategoricalDonutChart.jsx b/frontend/src/metabase/static-viz/components/CategoricalDonutChart/CategoricalDonutChart.jsx
index 3c08e4d5fc1..3501df7cdcb 100644
--- a/frontend/src/metabase/static-viz/components/CategoricalDonutChart/CategoricalDonutChart.jsx
+++ b/frontend/src/metabase/static-viz/components/CategoricalDonutChart/CategoricalDonutChart.jsx
@@ -5,6 +5,7 @@ import { Group } from "@visx/group";
import { Pie } from "@visx/shape";
import { Text } from "@visx/text";
import { formatNumber } from "../../lib/numbers";
+import { DIMENSION_ACCESSORS } from "../../constants/accessors";
const propTypes = {
data: PropTypes.array,
@@ -37,7 +38,12 @@ const layout = {
labelFontSize: 14,
};
-const CategoricalDonutChart = ({ data, colors, accessors, settings }) => {
+const CategoricalDonutChart = ({
+ data,
+ colors,
+ accessors = DIMENSION_ACCESSORS,
+ settings,
+}) => {
const innerWidth = layout.width - layout.margin * 2;
const innerHeight = layout.height - layout.margin * 2;
const outerRadius = Math.min(innerWidth, innerHeight) / 2;
diff --git a/frontend/src/metabase/static-viz/components/CategoricalDonutChart/constants.ts b/frontend/src/metabase/static-viz/components/CategoricalDonutChart/constants.ts
index 33ebfabab2c..84857b058ac 100644
--- a/frontend/src/metabase/static-viz/components/CategoricalDonutChart/constants.ts
+++ b/frontend/src/metabase/static-viz/components/CategoricalDonutChart/constants.ts
@@ -9,8 +9,4 @@ export const CATEGORICAL_DONUT_CHART_DEFAULT_OPTIONS = {
donut: "#509EE3",
cronut: "#DDECFA",
},
- accessors: {
- dimension: (row: any[]) => row[0],
- metric: (row: any[]) => row[1],
- },
};
diff --git a/frontend/src/metabase/static-viz/components/CategoricalLineChart/CategoricalLineChart.jsx b/frontend/src/metabase/static-viz/components/CategoricalLineChart/CategoricalLineChart.jsx
index feff35025dd..ddc832c5afa 100644
--- a/frontend/src/metabase/static-viz/components/CategoricalLineChart/CategoricalLineChart.jsx
+++ b/frontend/src/metabase/static-viz/components/CategoricalLineChart/CategoricalLineChart.jsx
@@ -15,13 +15,14 @@ import {
} from "../../lib/axes";
import { formatNumber } from "../../lib/numbers";
import { truncateText } from "../../lib/text";
+import { POSITIONAL_ACCESSORS } from "../../constants/accessors";
const propTypes = {
data: PropTypes.array.isRequired,
accessors: PropTypes.shape({
x: PropTypes.func.isRequired,
y: PropTypes.func.isRequired,
- }).isRequired,
+ }),
settings: PropTypes.shape({
x: PropTypes.object,
y: PropTypes.object,
@@ -58,7 +59,12 @@ const layout = {
strokeDasharray: "4",
};
-const CategoricalLineChart = ({ data, accessors, settings, labels }) => {
+const CategoricalLineChart = ({
+ data,
+ accessors = POSITIONAL_ACCESSORS,
+ settings,
+ labels,
+}) => {
const colors = settings?.colors;
const isVertical = data.length > 10;
const xTickWidth = getXTickWidth(
diff --git a/frontend/src/metabase/static-viz/components/CategoricalLineChart/constants.ts b/frontend/src/metabase/static-viz/components/CategoricalLineChart/constants.ts
index b9841b185f0..6c173d09c46 100644
--- a/frontend/src/metabase/static-viz/components/CategoricalLineChart/constants.ts
+++ b/frontend/src/metabase/static-viz/components/CategoricalLineChart/constants.ts
@@ -15,10 +15,6 @@ export const CATEGORICAL_LINE_CHART_DEFAULT_OPTIONS = {
["Roderick Herman", 50],
["Ruth Dougherty", 75],
],
- accessors: {
- x: (row: any[]) => row[0],
- y: (row: any[]) => row[1],
- },
labels: {
left: "Tasks",
bottom: "People",
diff --git a/frontend/src/metabase/static-viz/components/CategoricalWaterfallChart/CategoricalWaterfallChart.jsx b/frontend/src/metabase/static-viz/components/CategoricalWaterfallChart/CategoricalWaterfallChart.jsx
index 6b31c79a7e0..f4bc76fce4c 100644
--- a/frontend/src/metabase/static-viz/components/CategoricalWaterfallChart/CategoricalWaterfallChart.jsx
+++ b/frontend/src/metabase/static-viz/components/CategoricalWaterfallChart/CategoricalWaterfallChart.jsx
@@ -21,13 +21,14 @@ import {
calculateWaterfallEntries,
getWaterfallEntryColor,
} from "metabase/static-viz/lib/waterfall";
+import { POSITIONAL_ACCESSORS } from "../../constants/accessors";
const propTypes = {
data: PropTypes.array.isRequired,
accessors: PropTypes.shape({
x: PropTypes.func.isRequired,
y: PropTypes.func.isRequired,
- }).isRequired,
+ }),
settings: PropTypes.shape({
x: PropTypes.object,
y: PropTypes.object,
@@ -68,7 +69,12 @@ const layout = {
maxTickWidth: 100,
};
-const CategoricalWaterfallChart = ({ data, accessors, settings, labels }) => {
+const CategoricalWaterfallChart = ({
+ data,
+ accessors = POSITIONAL_ACCESSORS,
+ settings,
+ labels,
+}) => {
const entries = calculateWaterfallEntries(
data,
accessors,
diff --git a/frontend/src/metabase/static-viz/components/CategoricalWaterfallChart/constants.ts b/frontend/src/metabase/static-viz/components/CategoricalWaterfallChart/constants.ts
index 9d2e7b4f827..fbcfe1b2a6f 100644
--- a/frontend/src/metabase/static-viz/components/CategoricalWaterfallChart/constants.ts
+++ b/frontend/src/metabase/static-viz/components/CategoricalWaterfallChart/constants.ts
@@ -13,10 +13,6 @@ export const CATEGORICAL_WATERFALL_CHART_DEFAULT_OPTIONS = {
["Stage 9", 100],
["Stage 10", -300],
],
- accessors: {
- x: (row: any[]) => row[0],
- y: (row: any[]) => row[1],
- },
settings: {
showTotal: true,
},
diff --git a/frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/TimeSeriesAreaChart.jsx b/frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/TimeSeriesAreaChart.jsx
index dd9f87d2ffc..947236dbfc5 100644
--- a/frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/TimeSeriesAreaChart.jsx
+++ b/frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/TimeSeriesAreaChart.jsx
@@ -13,13 +13,14 @@ import {
import { formatDate } from "../../lib/dates";
import { formatNumber } from "../../lib/numbers";
import { sortTimeSeries } from "../../lib/sort";
+import { DATE_ACCESSORS } from "../../constants/accessors";
const propTypes = {
data: PropTypes.array.isRequired,
accessors: PropTypes.shape({
x: PropTypes.func,
y: PropTypes.func,
- }).isRequired,
+ }),
settings: PropTypes.shape({
x: PropTypes.object,
y: PropTypes.object,
@@ -58,7 +59,12 @@ const layout = {
strokeDasharray: "4",
};
-const TimeSeriesAreaChart = ({ data, accessors, settings, labels }) => {
+const TimeSeriesAreaChart = ({
+ data,
+ accessors = DATE_ACCESSORS,
+ settings,
+ labels,
+}) => {
data = sortTimeSeries(data);
const colors = settings?.colors;
const yTickWidth = getYTickWidth(data, accessors, settings, layout.font.size);
diff --git a/frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/constants.ts b/frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/constants.ts
index afd34664832..0e22c3b2f7c 100644
--- a/frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/constants.ts
+++ b/frontend/src/metabase/static-viz/components/TimeSeriesAreaChart/constants.ts
@@ -6,10 +6,6 @@ export const TIME_SERIES_AREA_CHART_DEFAULT_OPTIONS = {
["2020-06-10", 60],
["2020-12-10", 80],
],
- accessors: {
- x: (row: any[]) => new Date(row[0]).valueOf(),
- y: (row: any[]) => row[1],
- },
settings: {
x: {
date_style: "MMM",
diff --git a/frontend/src/metabase/static-viz/components/TimeSeriesBarChart/TimeSeriesBarChart.jsx b/frontend/src/metabase/static-viz/components/TimeSeriesBarChart/TimeSeriesBarChart.jsx
index 5ef188346ab..3c10908778a 100644
--- a/frontend/src/metabase/static-viz/components/TimeSeriesBarChart/TimeSeriesBarChart.jsx
+++ b/frontend/src/metabase/static-viz/components/TimeSeriesBarChart/TimeSeriesBarChart.jsx
@@ -13,13 +13,14 @@ import {
import { formatDate } from "../../lib/dates";
import { formatNumber } from "../../lib/numbers";
import { sortTimeSeries } from "../../lib/sort";
+import { DATE_ACCESSORS } from "../../constants/accessors";
const propTypes = {
data: PropTypes.array.isRequired,
accessors: PropTypes.shape({
x: PropTypes.func.isRequired,
y: PropTypes.func.isRequired,
- }).isRequired,
+ }),
settings: PropTypes.shape({
x: PropTypes.object,
y: PropTypes.object,
@@ -56,7 +57,12 @@ const layout = {
strokeDasharray: "4",
};
-const TimeSeriesBarChart = ({ data, accessors, settings, labels }) => {
+const TimeSeriesBarChart = ({
+ data,
+ accessors = DATE_ACCESSORS,
+ settings,
+ labels,
+}) => {
data = sortTimeSeries(data);
const colors = settings?.colors;
const yTickWidth = getYTickWidth(data, accessors, settings, layout.font.size);
diff --git a/frontend/src/metabase/static-viz/components/TimeSeriesBarChart/constants.ts b/frontend/src/metabase/static-viz/components/TimeSeriesBarChart/constants.ts
index 1b0db0c7055..a15964b7484 100644
--- a/frontend/src/metabase/static-viz/components/TimeSeriesBarChart/constants.ts
+++ b/frontend/src/metabase/static-viz/components/TimeSeriesBarChart/constants.ts
@@ -8,10 +8,6 @@ export const TIME_SERIES_BAR_CHART_DEFAULT_OPTIONS = {
["2020-10-24", 10],
["2020-10-25", 15],
],
- accessors: {
- x: (row: any[]) => new Date(row[0]).valueOf(),
- y: (row: any[]) => row[1],
- },
settings: {
x: {
date_style: "MM/DD/YYYY",
diff --git a/frontend/src/metabase/static-viz/components/TimeSeriesLineChart/TimeSeriesLineChart.jsx b/frontend/src/metabase/static-viz/components/TimeSeriesLineChart/TimeSeriesLineChart.jsx
index 5358830adb3..32695e569d8 100644
--- a/frontend/src/metabase/static-viz/components/TimeSeriesLineChart/TimeSeriesLineChart.jsx
+++ b/frontend/src/metabase/static-viz/components/TimeSeriesLineChart/TimeSeriesLineChart.jsx
@@ -13,13 +13,14 @@ import {
import { formatDate } from "../../lib/dates";
import { formatNumber } from "../../lib/numbers";
import { sortTimeSeries } from "../../lib/sort";
+import { DATE_ACCESSORS } from "../../constants/accessors";
const propTypes = {
data: PropTypes.array.isRequired,
accessors: PropTypes.shape({
x: PropTypes.func,
y: PropTypes.func,
- }).isRequired,
+ }),
settings: PropTypes.shape({
x: PropTypes.object,
y: PropTypes.object,
@@ -56,7 +57,12 @@ const layout = {
strokeDasharray: "4",
};
-const TimeSeriesLineChart = ({ data, accessors, settings, labels }) => {
+const TimeSeriesLineChart = ({
+ data,
+ accessors = DATE_ACCESSORS,
+ settings,
+ labels,
+}) => {
data = sortTimeSeries(data);
const colors = settings?.colors;
const yTickWidth = getYTickWidth(data, accessors, settings, layout.font.size);
diff --git a/frontend/src/metabase/static-viz/components/TimeSeriesLineChart/constants.ts b/frontend/src/metabase/static-viz/components/TimeSeriesLineChart/constants.ts
index 4f595df27e4..b29045effa7 100644
--- a/frontend/src/metabase/static-viz/components/TimeSeriesLineChart/constants.ts
+++ b/frontend/src/metabase/static-viz/components/TimeSeriesLineChart/constants.ts
@@ -6,10 +6,6 @@ export const TIME_SERIES_LINE_CHART_DEFAULT_OPTIONS = {
["2020-06-10", 60],
["2020-12-10", 80],
],
- accessors: {
- x: (row: any[]) => new Date(row[0]).valueOf(),
- y: (row: any[]) => row[1],
- },
labels: {
left: "Count",
bottom: "Created At",
diff --git a/frontend/src/metabase/static-viz/components/TimeSeriesWaterfallChart/TimeSeriesWaterfallChart.jsx b/frontend/src/metabase/static-viz/components/TimeSeriesWaterfallChart/TimeSeriesWaterfallChart.jsx
index 6d81f55996c..1b5356e46c9 100644
--- a/frontend/src/metabase/static-viz/components/TimeSeriesWaterfallChart/TimeSeriesWaterfallChart.jsx
+++ b/frontend/src/metabase/static-viz/components/TimeSeriesWaterfallChart/TimeSeriesWaterfallChart.jsx
@@ -19,13 +19,14 @@ import {
getWaterfallEntryColor,
} from "metabase/static-viz/lib/waterfall";
import { sortTimeSeries } from "../../lib/sort";
+import { DATE_ACCESSORS } from "../../constants/accessors";
const propTypes = {
data: PropTypes.array.isRequired,
accessors: PropTypes.shape({
x: PropTypes.func.isRequired,
y: PropTypes.func.isRequired,
- }).isRequired,
+ }),
settings: PropTypes.shape({
x: PropTypes.object,
y: PropTypes.object,
@@ -66,7 +67,12 @@ const layout = {
strokeDasharray: "4",
};
-const TimeSeriesWaterfallChart = ({ data, accessors, settings, labels }) => {
+const TimeSeriesWaterfallChart = ({
+ data,
+ accessors = DATE_ACCESSORS,
+ settings,
+ labels,
+}) => {
data = sortTimeSeries(data);
const colors = settings?.colors;
const yTickWidth = getYTickWidth(data, accessors, settings, layout.font.size);
diff --git a/frontend/src/metabase/static-viz/components/TimeSeriesWaterfallChart/constants.ts b/frontend/src/metabase/static-viz/components/TimeSeriesWaterfallChart/constants.ts
index 1fa1da3ed63..7046f7608fb 100644
--- a/frontend/src/metabase/static-viz/components/TimeSeriesWaterfallChart/constants.ts
+++ b/frontend/src/metabase/static-viz/components/TimeSeriesWaterfallChart/constants.ts
@@ -12,10 +12,6 @@ export const TIME_SERIES_WATERFALL_CHART_DEFAULT_OPTIONS = {
["2020-10-27", 20],
["2020-10-28", -15],
],
- accessors: {
- x: (row: any[]) => new Date(row[0]).valueOf(),
- y: (row: any[]) => row[1],
- },
labels: {
left: "Count",
bottom: "Created At",
diff --git a/frontend/src/metabase/static-viz/constants/accessors.ts b/frontend/src/metabase/static-viz/constants/accessors.ts
new file mode 100644
index 00000000000..e852f7cf0d0
--- /dev/null
+++ b/frontend/src/metabase/static-viz/constants/accessors.ts
@@ -0,0 +1,14 @@
+export const POSITIONAL_ACCESSORS = {
+ x: (row: any[]) => row[0],
+ y: (row: any[]) => row[1],
+};
+
+export const DATE_ACCESSORS = {
+ x: (row: any[]) => new Date(row[0]).valueOf(),
+ y: (row: any[]) => row[1],
+};
+
+export const DIMENSION_ACCESSORS = {
+ dimension: (row: any[]) => row[0],
+ metric: (row: any[]) => row[1],
+};
diff --git a/frontend/src/metabase/static-viz/containers/StaticChart/StaticChart.unit.spec.js b/frontend/src/metabase/static-viz/containers/StaticChart/StaticChart.unit.spec.js
index 93d5dd8c25a..2aae7c07c77 100644
--- a/frontend/src/metabase/static-viz/containers/StaticChart/StaticChart.unit.spec.js
+++ b/frontend/src/metabase/static-viz/containers/StaticChart/StaticChart.unit.spec.js
@@ -12,10 +12,6 @@ describe("StaticChart", () => {
["Gadget", 20],
["Widget", 31],
],
- accessors: {
- x: row => row[0],
- y: row => row[1],
- },
settings: {
y: {
number_style: "currency",
@@ -46,10 +42,6 @@ describe("StaticChart", () => {
["Gadget", 20],
["Widget", 31],
],
- accessors: {
- x: row => row[0],
- y: row => row[1],
- },
settings: {
y: {
number_style: "currency",
@@ -80,10 +72,6 @@ describe("StaticChart", () => {
["Gadget", 20],
["Widget", 31],
],
- accessors: {
- x: row => row[0],
- y: row => row[1],
- },
settings: {
y: {
number_style: "currency",
@@ -118,10 +106,6 @@ describe("StaticChart", () => {
donut: "#509EE3",
cronut: "#DDECFA",
},
- accessors: {
- dimension: row => row[0],
- metric: row => row[1],
- },
settings: {
metric: {
number_style: "currency",
@@ -146,10 +130,6 @@ describe("StaticChart", () => {
["2010-11-07", 20],
["2020-11-08", 30],
],
- accessors: {
- x: row => new Date(row[0]).valueOf(),
- y: row => row[1],
- },
settings: {
x: {
date_style: "dddd",
@@ -176,10 +156,6 @@ describe("StaticChart", () => {
["2010-11-07", 20],
["2020-11-08", 30],
],
- accessors: {
- x: row => new Date(row[0]).valueOf(),
- y: row => row[1],
- },
settings: {
x: {
date_style: "MMM",
@@ -206,10 +182,6 @@ describe("StaticChart", () => {
["2010-11-07", 20],
["2020-11-08", 30],
],
- accessors: {
- x: row => new Date(row[0]).valueOf(),
- y: row => row[1],
- },
settings: {
x: {
date_style: "dddd",
diff --git a/frontend/src/metabase/static-viz/lib/waterfall.unit.spec.js b/frontend/src/metabase/static-viz/lib/waterfall.unit.spec.js
index 36f7d6d5cda..796577da159 100644
--- a/frontend/src/metabase/static-viz/lib/waterfall.unit.spec.js
+++ b/frontend/src/metabase/static-viz/lib/waterfall.unit.spec.js
@@ -1,10 +1,6 @@
+import { POSITIONAL_ACCESSORS } from "../constants/accessors";
import { calculateWaterfallEntries } from "./waterfall";
-const accessors = {
- x: row => row[0],
- y: row => row[1],
-};
-
describe("calculateWaterfallEntries", () => {
it("calculates waterfall entries without total", () => {
const data = [
@@ -12,7 +8,11 @@ describe("calculateWaterfallEntries", () => {
["2", -50],
["3", 10],
];
- const entries = calculateWaterfallEntries(data, accessors, false);
+ const entries = calculateWaterfallEntries(
+ data,
+ POSITIONAL_ACCESSORS,
+ false,
+ );
expect(entries).toStrictEqual([
{
@@ -42,7 +42,7 @@ describe("calculateWaterfallEntries", () => {
["2", -50],
["3", 10],
];
- const entries = calculateWaterfallEntries(data, accessors, true);
+ const entries = calculateWaterfallEntries(data, POSITIONAL_ACCESSORS, true);
expect(entries).toStrictEqual([
{
@@ -79,7 +79,7 @@ describe("calculateWaterfallEntries", () => {
["2", -200],
["3", 50],
];
- const entries = calculateWaterfallEntries(data, accessors, true);
+ const entries = calculateWaterfallEntries(data, POSITIONAL_ACCESSORS, true);
expect(entries).toStrictEqual([
{
diff --git a/resources/frontend_shared/static_viz_interface.js b/resources/frontend_shared/static_viz_interface.js
index f1e6ccc61d7..a664ba6aa76 100644
--- a/resources/frontend_shared/static_viz_interface.js
+++ b/resources/frontend_shared/static_viz_interface.js
@@ -14,26 +14,10 @@ function toJSMap(m) {
return o;
}
-const date_accessors = {
- x: row => new Date(row[0]).valueOf(),
- y: row => row[1],
-};
-
-const positional_accessors = {
- x: row => row[0],
- y: row => row[1],
-};
-
-const dimension_accessors = {
- dimension: row => row[0],
- metric: row => row[1],
-};
-
function timeseries_line(data, labels, settings) {
return StaticViz.RenderChart("timeseries/line", {
data: toJSArray(data),
labels: toJSMap(labels),
- accessors: date_accessors,
settings: JSON.parse(settings),
});
}
@@ -42,7 +26,6 @@ function timeseries_bar(data, labels, settings) {
return StaticViz.RenderChart("timeseries/bar", {
data: toJSArray(data),
labels: toJSMap(labels),
- accessors: date_accessors,
settings: JSON.parse(settings),
});
}
@@ -51,7 +34,6 @@ function timeseries_area(data, labels, settings) {
return StaticViz.RenderChart("timeseries/area", {
data: toJSArray(data),
labels: toJSMap(labels),
- accessors: date_accessors,
settings: JSON.parse(settings),
});
}
@@ -69,7 +51,6 @@ function timeseries_waterfall(data, labels, settings) {
return StaticViz.RenderChart("timeseries/waterfall", {
data: toJSArray(data),
labels: toJSMap(labels),
- accessors: date_accessors,
settings: JSON.parse(settings),
});
}
@@ -85,7 +66,6 @@ function categorical_bar(data, labels, settings) {
return StaticViz.RenderChart("categorical/bar", {
data: toJSArray(data),
labels: toJSMap(labels),
- accessors: positional_accessors,
settings: JSON.parse(settings),
});
}
@@ -94,7 +74,6 @@ function categorical_area(data, labels, settings) {
return StaticViz.RenderChart("categorical/area", {
data: toJSArray(data),
labels: toJSMap(labels),
- accessors: positional_accessors,
settings: JSON.parse(settings),
});
}
@@ -103,7 +82,6 @@ function categorical_line(data, labels, settings) {
return StaticViz.RenderChart("categorical/line", {
data: toJSArray(data),
labels: toJSMap(labels),
- accessors: positional_accessors,
settings: JSON.parse(settings),
});
}
@@ -112,7 +90,6 @@ function categorical_donut(rows, colors) {
return StaticViz.RenderChart("categorical/donut", {
data: toJSArray(rows),
colors: toJSMap(colors),
- accessors: dimension_accessors,
});
}
@@ -120,7 +97,6 @@ function categorical_waterfall(data, labels, settings) {
return StaticViz.RenderChart("categorical/waterfall", {
data: toJSArray(data),
labels: toJSMap(labels),
- accessors: positional_accessors,
settings: JSON.parse(settings),
});
}
--
GitLab